@shopify/ui-extensions 2025.10.0-rc.2 → 2025.10.0-rc.4

package/src/docs/shared/components/Table.ts

@@ -3,16 +3,10 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'Table',
   description:
-    'Use `s-table` to organize and display data in a tabular format. Tables help merchants view, analyze, and compare data. By default the `s-table` renders as a list on mobile devices and a table on desktop devices.',
+    'Display data clearly in rows and columns, helping users view, analyze, and compare information. Automatically renders as a list on small screens and a table on large ones.',
   category: 'Polaris web components',
   subCategory: 'Structure',
-  related: [
-    {
-      type: 'component',
-      name: 'Grid',
-      url: 'grid',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/TableBody.ts

@@ -0,0 +1,12 @@
+import {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'TableBody',
+  description:
+    'Define the main content area of a table, containing rows and cells that display data.',
+  category: 'Polaris web components',
+  subCategory: 'Structure',
+  related: [],
+};
+
+export default data;

package/src/docs/shared/components/TableCell.ts

@@ -0,0 +1,11 @@
+import {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'TableCell',
+  description: 'Display data within a cell in a table row.',
+  category: 'Polaris web components',
+  subCategory: 'Structure',
+  related: [],
+};
+
+export default data;

package/src/docs/shared/components/TableHeader.ts

@@ -0,0 +1,11 @@
+import {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'TableHeader',
+  description: 'Display column names at the top of a table.',
+  category: 'Polaris web components',
+  subCategory: 'Structure',
+  related: [],
+};
+
+export default data;

package/src/docs/shared/components/TableHeaderRow.ts

@@ -0,0 +1,12 @@
+import {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'TableHeaderRow',
+  description:
+    'Define a header row in a table, displaying column names and enabling sorting.',
+  category: 'Polaris web components',
+  subCategory: 'Structure',
+  related: [],
+};
+
+export default data;

package/src/docs/shared/components/TableRow.ts

@@ -0,0 +1,11 @@
+import {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'TableRow',
+  description: 'Display a row of data within the body of a table.',
+  category: 'Polaris web components',
+  subCategory: 'Structure',
+  related: [],
+};
+
+export default data;

package/src/docs/shared/components/Text.ts

@@ -6,18 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = {
     'Displays inline text with specific visual styles or tones. Use to emphasize or differentiate words or phrases within a Paragraph or other block-level components.',
   category: 'Polaris web components',
   subCategory: 'Titles and text',
-  related: [
-    {
-      name: 'Heading',
-      url: 'heading',
-      type: 'Component',
-    },
-    {
-      name: 'Paragraph',
-      url: 'paragraph',
-      type: 'Component',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/TextArea.ts

@@ -3,16 +3,10 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'TextArea',
   description:
-    'Use `s-text-area` when you need to collect longer text content from merchants. Text areas allow for multiple lines of text and automatically expand to fit the content.',
+    'Collect longer text content from users with a multi-line input that expands automatically.',
   category: 'Polaris web components',
   subCategory: 'Forms',
-  related: [
-    {
-      type: 'component',
-      name: 'TextField',
-      url: 'textfield',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/Time.ts

@@ -6,18 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = {
     'Represents a specific point or duration in time. Use to display dates, times, or durations clearly and consistently. May include a machine-readable `datetime` attribute for improved accessibility and functionality.',
   category: 'Polaris web components',
   subCategory: 'Titles and text',
-  related: [
-    {
-      name: 'Text',
-      url: 'text',
-      type: 'Component',
-    },
-    {
-      name: 'Paragraph',
-      url: 'paragraph',
-      type: 'Component',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/URLField.ts

@@ -2,21 +2,11 @@ import {SharedReferenceEntityTemplateSchema} from '../docs-type';
 
 const data: SharedReferenceEntityTemplateSchema = {
   name: 'URLField',
-  description: 'Use a URLField when you need to collect URLs from merchants.',
+  description:
+    'Collect URLs from users with built-in formatting and validation.',
   category: 'Polaris web components',
   subCategory: 'Forms',
-  related: [
-    {
-      type: 'component',
-      name: 'TextField',
-      url: 'textfield',
-    },
-    {
-      type: 'component',
-      name: 'EmailField',
-      url: 'emailfield',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/docs/shared/components/UnorderedList.ts

@@ -6,13 +6,7 @@ const data: SharedReferenceEntityTemplateSchema = {
     'Displays a bulleted list of related items. Use to present collections of items or options where the sequence isn’t critical.',
   category: 'Polaris web components',
   subCategory: 'Structure',
-  related: [
-    {
-      name: 'OrderedList',
-      url: 'orderedlist',
-      type: 'component',
-    },
-  ],
+  related: [],
 };
 
 export default data;

package/src/surfaces/admin/components/Banner.d.ts

@@ -126,7 +126,9 @@ export interface BannerJSXProps
   extends Partial<BannerProps>,
     Pick<BannerProps$1, 'id'> {
   /**
-   * The secondary actions to display at the bottom of the banner. Only a maximum of two `s-button` components are allowed.
+   * The secondary actions to display at the bottom of the banner.
+   *
+   * A maximum of two `s-button` components are allowed, and only buttons with the `variant` of "secondary" are permitted.
    */
   secondaryActions?: ComponentChild;
   onDismiss?: ((event: CallbackEvent<typeof tagName>) => void) | null;

package/src/surfaces/admin/components/Button.d.ts

@@ -132,11 +132,25 @@ declare abstract class PreactCustomElement extends BaseClass {
 }
 
 export interface PreactOverlayControlProps
-  extends Required<Pick<InteractionProps, 'commandFor'>> {
+  extends Pick<InteractionProps, 'commandFor'> {
+  /**
+   * Sets the action the `commandFor` should take when this clickable is activated.
+   *
+   * See the documentation of particular components for the actions they support.
+   *
+   * - `--auto`: a default action for the target component.
+   * - `--show`: shows the target component.
+   * - `--hide`: hides the target component.
+   * - `--toggle`: toggles the target component.
+   *
+   * @default '--auto'
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command
+   */
   command: Extract<
     InteractionProps['command'],
     '--show' | '--hide' | '--toggle' | '--auto'
   >;
+  commandFor: Extract<InteractionProps['commandFor'], string>;
 }
 
 declare const Button_base: (abstract new (

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

@@ -29,6 +29,14 @@ export type CallbackEvent<
 > = TEvent & {
   currentTarget: HTMLElementTagNameMap[TTagName];
 };
+export type CallbackEventListener<
+  TTagName extends keyof HTMLElementTagNameMap,
+  TEvent extends Event = Event,
+> =
+  | (EventListener & {
+      (event: CallbackEvent<TTagName, TEvent>): void;
+    })
+  | null;
 
 export type Styles = string;
 export type RenderImpl = Omit<ShadowRootInit, 'mode'> & {
@@ -104,6 +112,8 @@ declare class ChoiceList extends BaseClass implements ChoiceListProps {
   accessor details: ChoiceListProps['details'];
   accessor multiple: ChoiceListProps['multiple'];
   accessor label: ChoiceListProps['label'];
+  accessor onchange: CallbackEventListener<typeof tagName> | null;
+  accessor oninput: CallbackEventListener<typeof tagName> | null;
   accessor labelAccessibilityVisibility: ChoiceListProps['labelAccessibilityVisibility'];
   get values(): ChoiceListProps['values'];
   set values(values: ChoiceListProps['values']);

package/src/surfaces/admin/components/Clickable.d.ts

@@ -296,11 +296,25 @@ declare abstract class PreactCustomElement extends BaseClass {
 }
 
 export interface PreactOverlayControlProps
-  extends Required<Pick<InteractionProps, 'commandFor'>> {
+  extends Pick<InteractionProps, 'commandFor'> {
+  /**
+   * Sets the action the `commandFor` should take when this clickable is activated.
+   *
+   * See the documentation of particular components for the actions they support.
+   *
+   * - `--auto`: a default action for the target component.
+   * - `--show`: shows the target component.
+   * - `--hide`: hides the target component.
+   * - `--toggle`: toggles the target component.
+   *
+   * @default '--auto'
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command
+   */
   command: Extract<
     InteractionProps['command'],
     '--show' | '--hide' | '--toggle' | '--auto'
   >;
+  commandFor: Extract<InteractionProps['commandFor'], string>;
 }
 
 declare class BoxElement extends PreactCustomElement implements BoxProps {

package/src/surfaces/admin/components/DatePicker/examples/default.html

@@ -1 +1,5 @@
-  <s-date-picker></s-date-picker>
+<s-date-picker
+  view="2025-05"
+  type="range"
+  value="2025-05-28--2025-05-31"
+></s-date-picker>

package/src/surfaces/admin/components/Form/examples/default.html

@@ -0,0 +1,4 @@
+<s-form>
+  <s-text-field label="Email address" />
+  <s-button variant="primary" accessibilityRole="submit">Submit</s-button>
+</s-form>

package/src/surfaces/admin/components/Form/examples/default.jsx

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

package/src/surfaces/admin/components/Link.d.ts

@@ -111,11 +111,25 @@ declare abstract class PreactCustomElement extends BaseClass {
 }
 
 export interface PreactOverlayControlProps
-  extends Required<Pick<InteractionProps, 'commandFor'>> {
+  extends Pick<InteractionProps, 'commandFor'> {
+  /**
+   * Sets the action the `commandFor` should take when this clickable is activated.
+   *
+   * See the documentation of particular components for the actions they support.
+   *
+   * - `--auto`: a default action for the target component.
+   * - `--show`: shows the target component.
+   * - `--hide`: hides the target component.
+   * - `--toggle`: toggles the target component.
+   *
+   * @default '--auto'
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command
+   */
   command: Extract<
     InteractionProps['command'],
     '--show' | '--hide' | '--toggle' | '--auto'
   >;
+  commandFor: Extract<InteractionProps['commandFor'], string>;
 }
 
 declare const Link_base: (abstract new (

package/src/surfaces/admin/components/Page.d.ts

@@ -96,6 +96,8 @@ declare const tagName = 's-page';
 export interface PageJSXProps extends Partial<PageProps> {
   /**
    * The content to display in the aside section of the page.
+   *
+   * This slot is only rendered when `inlineSize` is "base".
    */
   aside?: ComponentChild;
 }

package/src/surfaces/admin/components/TextField/examples/default.html

@@ -1,5 +1,5 @@
 <s-text-field
   label="Store name"
-  defaultValue="Jaded Pixel"
+  value="Jaded Pixel"
   placeholder="Become a merchant"
 ></s-text-field>

package/src/surfaces/admin/components/shared.d.ts

@@ -3274,6 +3274,7 @@ type IconType$1 =
   | 'enter'
   | 'envelope'
   | 'envelope-soft-pack'
+  | 'eraser'
   | 'exchange'
   | 'exit'
   | 'export'

package/src/surfaces/admin/components.d.ts

@@ -3276,6 +3276,7 @@ type IconType$1 =
   | 'enter'
   | 'envelope'
   | 'envelope-soft-pack'
+  | 'eraser'
   | 'exchange'
   | 'exit'
   | 'export'
@@ -3971,7 +3972,9 @@ export interface BannerJSXProps
   extends Partial<BannerProps>,
     Pick<BannerProps$1, 'id'> {
   /**
-   * The secondary actions to display at the bottom of the banner. Only a maximum of two `s-button` components are allowed.
+   * The secondary actions to display at the bottom of the banner.
+   *
+   * A maximum of two `s-button` components are allowed, and only buttons with the `variant` of "secondary" are permitted.
    */
   secondaryActions?: ComponentChild;
   onDismiss?: ((event: CallbackEvent<typeof tagName$L>) => void) | null;
@@ -4247,11 +4250,25 @@ export interface ButtonProps extends ButtonBaseProps {
 }
 
 export interface PreactOverlayControlProps
-  extends Required<Pick<InteractionProps, 'commandFor'>> {
+  extends Pick<InteractionProps, 'commandFor'> {
+  /**
+   * Sets the action the `commandFor` should take when this clickable is activated.
+   *
+   * See the documentation of particular components for the actions they support.
+   *
+   * - `--auto`: a default action for the target component.
+   * - `--show`: shows the target component.
+   * - `--hide`: hides the target component.
+   * - `--toggle`: toggles the target component.
+   *
+   * @default '--auto'
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command
+   */
   command: Extract<
     InteractionProps['command'],
     '--show' | '--hide' | '--toggle' | '--auto'
   >;
+  commandFor: Extract<InteractionProps['commandFor'], string>;
 }
 
 declare const Button_base: (abstract new (
@@ -4308,8 +4325,6 @@ declare class PreactInputElement
   static formAssociated: boolean;
   /** @private */
   [internals$2]: ElementInternals;
-  accessor onchange: CallbackEventListener<'input'>;
-  accessor oninput: CallbackEventListener<'input'>;
   accessor disabled: PreactInputProps['disabled'];
   accessor id: PreactInputProps['id'];
   accessor name: PreactInputProps['name'];
@@ -4716,8 +4731,6 @@ declare class PreactFieldElement<Autocomplete extends string = string>
   extends PreactInputElement
   implements PreactFieldProps<Autocomplete>
 {
-  accessor onblur: CallbackEventListener<'input'>;
-  accessor onfocus: CallbackEventListener<'input'>;
   accessor autocomplete: PreactFieldProps<Autocomplete>['autocomplete'];
   accessor defaultValue: PreactFieldProps['defaultValue'];
   accessor details: PreactFieldProps['details'];
@@ -5030,7 +5043,6 @@ declare class Image extends PreactCustomElement implements ImageProps {
   accessor borderStyle: ImageProps['borderStyle'];
   accessor borderColor: ImageProps['borderColor'];
   accessor borderRadius: ImageProps['borderRadius'];
-  accessor onerror: OnErrorEventHandler;
   constructor();
 }
 declare global {
@@ -5355,6 +5367,8 @@ declare const tagName$p = 's-page';
 export interface PageJSXProps extends Partial<PageProps> {
   /**
    * The content to display in the aside section of the page.
+   *
+   * This slot is only rendered when `inlineSize` is "base".
    */
   aside?: ComponentChild;
 }
@@ -6420,7 +6434,6 @@ declare class FunctionSettings
   implements FunctionSettingsProps
 {
   constructor();
-  accessor onerror: OnErrorEventHandler;
 }
 declare global {
   interface HTMLElementTagNameMap {
@@ -6552,7 +6565,9 @@ export interface BannerEvents {
 
 export interface BannerSlots {
   /**
-   * The secondary actions to display at the bottom of the banner. Only a maximum of two `s-button` components are allowed.
+   * The secondary actions to display at the bottom of the banner.
+   *
+   * A maximum of two `s-button` components are allowed, and only buttons with the `variant` of "secondary" are permitted.
    */
   'secondary-actions'?: HTMLElement;
 }
@@ -6563,6 +6578,16 @@ export interface ButtonEvents {
   focus: CallbackEventListener<typeof tagName> | null = null;
 }
 
+export interface CheckboxEvents {
+  change: CallbackEventListener<'input'>;
+  input: CallbackEventListener<'input'>;
+}
+
+export interface ChoiceListEvents {
+  change: CallbackEventListener<typeof tagName> | null = null;
+  input: CallbackEventListener<typeof tagName> | null = null;
+}
+
 export interface ClickableEvents {
   click: CallbackEventListener<typeof tagName> | null = null;
   blur: CallbackEventListener<typeof tagName> | null = null;
@@ -6580,21 +6605,69 @@ export interface DatePickerEvents {
   change: CallbackEventListener<typeof tagName> | null = null;
 }
 
+export interface EmailFieldEvents {
+  change: CallbackEventListener<'input'>;
+  input: CallbackEventListener<'input'>;
+  blur: CallbackEventListener<'input'>;
+  focus: CallbackEventListener<'input'>;
+}
+
 export interface ImageEvents {
   load: CallbackEventListener<typeof tagName> | null = null;
+  error: OnErrorEventHandler = null;
 }
 
 export interface LinkEvents {
   click: CallbackEventListener<typeof tagName> | null = null;
 }
 
+export interface MoneyFieldEvents {
+  change: CallbackEventListener<'input'>;
+  input: CallbackEventListener<'input'>;
+  blur: CallbackEventListener<'input'>;
+  focus: CallbackEventListener<'input'>;
+}
+
+export interface NumberFieldEvents {
+  change: CallbackEventListener<'input'>;
+  input: CallbackEventListener<'input'>;
+  blur: CallbackEventListener<'input'>;
+  focus: CallbackEventListener<'input'>;
+}
+
 export interface PageSlots {
   /**
    * The content to display in the aside section of the page.
+   *
+   * This slot is only rendered when `inlineSize` is "base".
    */
   aside?: HTMLElement;
 }
 
+export interface PasswordFieldEvents {
+  change: CallbackEventListener<'input'>;
+  input: CallbackEventListener<'input'>;
+  blur: CallbackEventListener<'input'>;
+  focus: CallbackEventListener<'input'>;
+}
+
+export interface SearchFieldEvents {
+  change: CallbackEventListener<'input'>;
+  input: CallbackEventListener<'input'>;
+  blur: CallbackEventListener<'input'>;
+  focus: CallbackEventListener<'input'>;
+}
+
+export interface SelectEvents {
+  change: CallbackEventListener<'input'>;
+  input: CallbackEventListener<'input'>;
+}
+
+export interface SwitchEvents {
+  change: CallbackEventListener<'input'>;
+  input: CallbackEventListener<'input'>;
+}
+
 export interface TableEvents {
   previouspage: CallbackEventListener<typeof tagName> | null = null;
   nextpage: CallbackEventListener<typeof tagName> | null = null;
@@ -6607,6 +6680,20 @@ export interface TableSlots {
   filters?: HTMLElement;
 }
 
+export interface TextAreaEvents {
+  change: CallbackEventListener<'input'>;
+  input: CallbackEventListener<'input'>;
+  blur: CallbackEventListener<'input'>;
+  focus: CallbackEventListener<'input'>;
+}
+
+export interface TextFieldEvents {
+  change: CallbackEventListener<'input'>;
+  input: CallbackEventListener<'input'>;
+  blur: CallbackEventListener<'input'>;
+  focus: CallbackEventListener<'input'>;
+}
+
 export interface TextFieldSlots {
   /**
    * The accessory to display in the text field.
@@ -6614,6 +6701,13 @@ export interface TextFieldSlots {
   accessory?: HTMLElement;
 }
 
+export interface URLFieldEvents {
+  change: CallbackEventListener<'input'>;
+  input: CallbackEventListener<'input'>;
+  blur: CallbackEventListener<'input'>;
+  focus: CallbackEventListener<'input'>;
+}
+
 export interface AdminActionSlots {
   /**
    * The primary action to display in the admin action.
@@ -6631,6 +6725,7 @@ export interface FormEvents {
 
 export interface FunctionSettingsEvents {
   save: CallbackEventListener<typeof tagName> | null = null;
+  error: OnErrorEventHandler = null;
 }
 declare module 'react' {
   interface BaseProps {

package/src/surfaces/checkout/components/Abbreviation/examples/basic-abbreviation.example.html

@@ -1 +1 @@
-<s-abbreviation title="Buy Online, Pick Up In-Store">BOPIS</s-abbreviation>
+<s-abbreviation title="United States Dollar">USD</s-abbreviation>

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

@@ -20,9 +20,13 @@ declare global {
     }
 }
 declare module 'preact' {
+    interface BaseProps {
+        children?: preact.ComponentChildren;
+        slot?: Lowercase<string>;
+    }
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-abbreviation': Omit<HTMLAttributes<HTMLElement>, Extract<keyof HTMLAttributes<HTMLElement>, `on${Capitalize<string>}`>> & AbbreviationProps;
+            's-abbreviation': AbbreviationProps & BaseProps;
         }
     }
 }

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

@@ -23,9 +23,13 @@ declare global {
     }
 }
 declare module 'preact' {
+    interface BaseProps {
+        children?: preact.ComponentChildren;
+        slot?: Lowercase<string>;
+    }
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-banner': Omit<HTMLAttributes<HTMLElement>, Extract<keyof HTMLAttributes<HTMLElement>, `on${Capitalize<string>}`>> & BannerProps;
+            's-banner': BannerProps & BaseProps;
         }
     }
 }

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

@@ -14,8 +14,7 @@ export type ReducedBorderSizeKeyword = Extract<BorderSizeKeyword, 'none' | 'base
 export type ReducedColorKeyword = Extract<ColorKeyword, 'base'>;
 export type BorderShorthand = ReducedBorderSizeKeyword | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword}` | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword} ${BorderStyleKeyword}`;
 
-export interface BoxProps extends Pick<BoxProps$1, 'accessibilityLabel' | 'accessibilityRole' | 'accessibilityVisibility' | 'background' | 'border' | 'borderColor' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'display' | 'id' | 'maxBlockSize' | 'maxInlineSize' | 'minBlockSize' | 'minInlineSize' | 'overflow' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart'> {
-    accessibilityRole?: Extract<BoxProps$1['accessibilityRole'], 'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'>;
+export interface BoxProps extends Pick<BoxProps$1, 'accessibilityLabel' | 'accessibilityRole' | 'accessibilityVisibility' | 'background' | 'border' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'display' | 'id' | 'maxBlockSize' | 'maxInlineSize' | 'minBlockSize' | 'minInlineSize' | 'overflow' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart'> {
     background?: Extract<BoxProps$1['background'], 'transparent' | 'subdued' | 'base'>;
     border?: BorderShorthand;
     borderWidth?: MaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | '';
@@ -29,9 +28,13 @@ declare global {
     }
 }
 declare module 'preact' {
+    interface BaseProps {
+        children?: preact.ComponentChildren;
+        slot?: Lowercase<string>;
+    }
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-box': Omit<HTMLAttributes<HTMLElement>, Extract<keyof HTMLAttributes<HTMLElement>, `on${Capitalize<string>}`>> & BoxProps;
+            's-box': BoxProps & BaseProps;
         }
     }
 }