@shopify/ui-extensions 2025.10.0-rc.3 → 2025.10.0-rc.30

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

@@ -0,0 +1,379 @@
+/** VERSION: 1.8.0 **/
+/* eslint-disable import/extensions */
+
+/* eslint-disable @typescript-eslint/no-namespace */
+/* eslint-disable @typescript-eslint/member-ordering */
+
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
+/// <reference lib="DOM" />
+import type {
+  PopoverProps$1,
+  BoxProps$1,
+  InteractionProps,
+  ComponentChild,
+  MaybeAllValuesShorthandProperty,
+} from './shared.d.ts';
+
+export interface PopoverProps
+  extends Required<
+    Pick<
+      PopoverProps$1,
+      | 'blockSize'
+      | 'inlineSize'
+      | 'maxBlockSize'
+      | 'maxInlineSize'
+      | 'minBlockSize'
+      | 'minInlineSize'
+    >
+  > {}
+
+export type CallbackEvent<T extends keyof HTMLElementTagNameMap> = Event & {
+  currentTarget: HTMLElementTagNameMap[T];
+};
+export type CallbackToggleEvent<
+  TTagName extends keyof HTMLElementTagNameMap,
+  TEvent extends ToggleEvent = ToggleEvent,
+> = TEvent & {
+  currentTarget: HTMLElementTagNameMap[TTagName];
+};
+export type CallbackEventListener<T extends keyof HTMLElementTagNameMap> =
+  | (EventListener & {
+      (event: CallbackEvent<T>): void;
+    })
+  | null;
+/** Used when an element does not have children. */
+export interface PreactBaseElementProps<TClass extends HTMLElement> {
+  /** Assigns a unique key to this element. */
+  key?: preact.Key;
+  /** Assigns a ref (generally from `useRef()`) to this element. */
+  ref?: preact.Ref<TClass>;
+  /** Assigns this element to a parent's slot. */
+  slot?: Lowercase<string>;
+}
+/** Used when an element has children. */
+export interface PreactBaseElementPropsWithChildren<TClass extends HTMLElement>
+  extends PreactBaseElementProps<TClass> {
+  children?: preact.ComponentChildren;
+}
+
+export type Styles = string;
+export type RenderImpl = Omit<ShadowRootInit, 'mode'> & {
+  ShadowRoot: (element: any) => ComponentChild;
+  styles?: Styles;
+};
+export interface ActivationEventEsque {
+  shiftKey: boolean;
+  metaKey: boolean;
+  ctrlKey: boolean;
+  button: number;
+}
+export interface ClickOptions {
+  /**
+   * The event you want to influence the synthetic click.
+   */
+  sourceEvent?: ActivationEventEsque;
+}
+/**
+ * Base class for creating custom elements with Preact.
+ * While this class could be used in both Node and the browser, the constructor will only be used in the browser.
+ * So we give it a type of HTMLElement to avoid typing issues later where it's used, which will only happen in the browser.
+ */
+declare const BaseClass: typeof globalThis.HTMLElement;
+declare abstract class PreactCustomElement extends BaseClass {
+  /** @private */
+  static get observedAttributes(): string[];
+  constructor({
+    styles,
+    ShadowRoot: renderFunction,
+    delegatesFocus,
+    ...options
+  }: RenderImpl);
+
+  /** @private */
+  setAttribute(name: string, value: string): void;
+  /** @private */
+  attributeChangedCallback(name: string): void;
+  /** @private */
+  connectedCallback(): void;
+  /** @private */
+  disconnectedCallback(): void;
+  /** @private */
+  adoptedCallback(): void;
+  /**
+   * Queue a run of the render function.
+   * You shouldn't need to call this manually - it should be handled by changes to @property values.
+   * @private
+   */
+  queueRender(): void;
+  /**
+   * Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.
+   *
+   * For example, if the `sourceEvent` was a middle click, or has particular keys held down,
+   * components will attempt to produce the desired behavior on links, such as opening the page in the background tab.
+   * @private
+   * @param options
+   */
+  click({sourceEvent}?: ClickOptions): void;
+}
+
+/**
+ * Shared symbols for overlay control functionality.
+ * These symbols are used by components that implement overlay behavior
+ * (like Popover, Tooltip, etc.) to communicate with the overlay control system.
+ */
+declare const overlayCommand: unique symbol;
+declare const overlayHidden: unique symbol;
+declare const overlayActivator: unique symbol;
+
+declare class PreactOverlayElement extends PreactCustomElement {
+  constructor(renderImpl: RenderImpl);
+  /** @private */
+  [overlayHidden]: boolean;
+  /** @private */
+  [overlayActivator]: HTMLElement | null | undefined;
+  /** @private */
+  [overlayCommand](command: InteractionProps['command']): void;
+}
+
+export type MakeResponsive<T> = T | `@container${string}`;
+/**
+ * Makes a property's value potentially responsive.
+ *
+ * @example
+ * type Example = {
+ *   color: boolean;
+ *   margin: string;
+ *   padding: number;
+ * }
+ * type Result = MakeResponsivePick<Example, 'color' | 'margin' | 'padding'>;
+ * // Result = {
+ *   color: boolean | `@container${string}`;
+ *   margin: string | `@container${string}`;
+ *   padding: number | `@container${string}`;
+ * }
+ */
+export type MakeResponsivePick<TType, TProperty extends keyof TType> = {
+  [P in TProperty]: MakeResponsive<TType[P]>;
+};
+
+export type RequiredBoxProps = Required<BoxProps$1>;
+export type BoxBorderRadii = Extract<
+  RequiredBoxProps['borderRadius'],
+  | 'none'
+  | 'small-200'
+  | 'small-100'
+  | 'small'
+  | 'base'
+  | 'large'
+  | 'large-100'
+  | 'large-200'
+>;
+export type BoxBorderStyles = Extract<
+  RequiredBoxProps['borderStyle'],
+  'none' | 'solid' | 'dashed' | 'auto'
+>;
+export type ResponsiveBoxProps = MakeResponsivePick<
+  RequiredBoxProps,
+  | 'padding'
+  | 'paddingBlock'
+  | 'paddingBlockStart'
+  | 'paddingBlockEnd'
+  | 'paddingInline'
+  | 'paddingInlineStart'
+  | 'paddingInlineEnd'
+  | 'display'
+>;
+export interface BoxProps
+  extends Pick<
+    RequiredBoxProps,
+    | 'accessibilityLabel'
+    | 'accessibilityRole'
+    | 'accessibilityVisibility'
+    | 'background'
+    | 'blockSize'
+    | 'border'
+    | 'borderColor'
+    | 'borderRadius'
+    | 'borderStyle'
+    | 'borderWidth'
+    | 'inlineSize'
+    | 'maxBlockSize'
+    | 'maxInlineSize'
+    | 'minBlockSize'
+    | 'minInlineSize'
+    | 'overflow'
+  > {
+  background: Extract<
+    RequiredBoxProps['background'],
+    'transparent' | 'base' | 'subdued' | 'strong'
+  >;
+  borderWidth:
+    | MaybeAllValuesShorthandProperty<
+        Extract<
+          RequiredBoxProps['borderWidth'],
+          'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'none'
+        >
+      >
+    | Extract<RequiredBoxProps['borderWidth'], ''>;
+  borderStyle:
+    | MaybeAllValuesShorthandProperty<BoxBorderStyles>
+    | Extract<RequiredBoxProps['borderStyle'], ''>;
+  borderColor: Extract<
+    RequiredBoxProps['borderColor'],
+    'subdued' | 'base' | 'strong' | ''
+  >;
+  borderRadius: MaybeAllValuesShorthandProperty<BoxBorderRadii>;
+  /**
+   * Adjust the padding of all edges.
+   *
+   * 1-to-4-value syntax (@see 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.
+   *
+   * `padding` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`)
+   *
+   * This also accepts up to 4 values (e.g. `@container (inline-size > 500px) large-300 small-300 large-100 small-100, small-200`)
+   *
+   * @default 'none'
+   */
+  padding: ResponsiveBoxProps['padding'];
+  /**
+   * Adjust the block-padding.
+   *
+   * - `large none` means block-start padding is `large`, block-end padding is `none`.
+   *
+   * This overrides the block value of `padding`.
+   *
+   * `paddingBlock` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`)
+   *
+   * This also accepts up to 2 values (e.g. `@container (inline-size > 500px) large-300 small-300, small-200`)
+   *
+   * @default '' - meaning no override
+   */
+  paddingBlock: ResponsiveBoxProps['paddingBlock'];
+  /**
+   * Adjust the block-start padding.
+   *
+   * This overrides the block-start value of `paddingBlock`.
+   *
+   * `paddingBlockStart` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`)
+   *
+   * This only accepts 1 value per predicate (e.g. `@container (inline-size > 500px) large-300, small-200`)
+   * @default '' - meaning no override
+   */
+  paddingBlockStart: ResponsiveBoxProps['paddingBlockStart'];
+  /**
+   * Adjust the block-end padding.
+   *
+   * This overrides the block-end value of `paddingBlock`.
+   *
+   * `paddingBlockEnd` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`)
+   *
+   * This only accepts up to 1 value per predicate (e.g. `@container (inline-size > 500px) large-300, small-200`)
+   * @default '' - meaning no override
+   */
+  paddingBlockEnd: ResponsiveBoxProps['paddingBlockEnd'];
+  /**
+   * Adjust the inline padding.
+   *
+   * - `large none` means inline-start padding is `large`, inline-end padding is `none`.
+   *
+   * This overrides the inline value of `padding`.
+   *
+   * `paddingInline` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`)
+   *
+   * This also accepts up to 2 values (e.g. `@container (inline-size > 500px) large-300 small-300, small-200`)
+   *
+   * @default '' - meaning no override
+   */
+  paddingInline: ResponsiveBoxProps['paddingInline'];
+  /**
+   * Adjust the inline-start padding.
+   *
+   * This overrides the inline-start value of `paddingInline`.
+   *
+   * `paddingInlineStart` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`)
+   * This only accepts 1 value per predicate (e.g. `@container (inline-size > 500px) large-300, small-200`)
+   *
+   * @default '' - meaning no override
+   */
+  paddingInlineStart: ResponsiveBoxProps['paddingInlineStart'];
+  /**
+   * Adjust the inline-end padding.
+   *
+   * This overrides the inline-end value of `paddingInline`.
+   *
+   * `paddingInlineEnd` also accepts a container query string with the supported PaddingKeyword as a query value e.g. (`@container (inline-size > 500px) large-300, small-300`)
+   * This only accepts 1 value per predicate (e.g. `@container (inline-size > 500px) large-300, small-200`)
+   *
+   * @default '' - meaning no override
+   */
+  paddingInlineEnd: ResponsiveBoxProps['paddingInlineEnd'];
+  /**
+   * Sets the outer display type of the component. The outer type sets a component's participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout).
+   *
+   * - `auto` the component's initial value. The actual value depends on the component and context.
+   * - `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
+   * @default 'auto'
+   */
+  display: ResponsiveBoxProps['display'];
+}
+
+declare class PreactPopoverElement<TTagName extends keyof HTMLElementTagNameMap>
+  extends PreactOverlayElement
+  implements PopoverProps
+{
+  constructor(renderImpl: RenderImpl);
+  accessor blockSize: BoxProps['blockSize'];
+  accessor minBlockSize: BoxProps['minBlockSize'];
+  accessor maxBlockSize: BoxProps['maxBlockSize'];
+  accessor inlineSize: BoxProps['inlineSize'];
+  accessor minInlineSize: BoxProps['minInlineSize'];
+  accessor maxInlineSize: BoxProps['maxInlineSize'];
+}
+
+declare class Popover
+  extends PreactPopoverElement<typeof tagName>
+  implements PopoverProps
+{
+  constructor();
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName]: Popover;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName]: PopoverJSXProps & PreactBaseElementPropsWithChildren<Popover>;
+    }
+  }
+}
+
+declare const tagName = 's-popover';
+export interface PopoverJSXProps extends Partial<PopoverProps> {
+  id?: string;
+  onHide?: (event: CallbackEvent<typeof tagName>) => void | null;
+  onShow?: (event: CallbackEvent<typeof tagName>) => void | null;
+  onAfterHide?: (event: CallbackEvent<typeof tagName>) => void | null;
+  onAfterShow?: (event: CallbackEvent<typeof tagName>) => void | null;
+  onToggle?: (event: CallbackToggleEvent<typeof tagName>) => void | null;
+  onAfterToggle?: (event: CallbackToggleEvent<typeof tagName>) => void | null;
+}
+
+export {Popover};
+export type {PopoverJSXProps};

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

@@ -0,0 +1,8 @@
+<s-query-container>
+  <s-box
+    padding="@container (inline-size > 500px) large-500, none"
+    background="strong"
+  >
+    Padding is applied when the inline-size '>' 500px
+  </s-box>
+</s-query-container>

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

@@ -0,0 +1,106 @@
+/** VERSION: 1.10.0 **/
+/* eslint-disable import/extensions */
+
+/* eslint-disable @typescript-eslint/no-namespace */
+/* eslint-disable @typescript-eslint/member-ordering */
+
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
+/// <reference lib="DOM" />
+import type {QueryContainerProps$1, ComponentChild} from './shared.d.ts';
+
+export type Styles = string;
+export type RenderImpl = Omit<ShadowRootInit, 'mode'> & {
+  ShadowRoot: (element: any) => ComponentChild;
+  styles?: Styles;
+};
+export interface ActivationEventEsque {
+  shiftKey: boolean;
+  metaKey: boolean;
+  ctrlKey: boolean;
+  button: number;
+}
+export interface ClickOptions {
+  /**
+   * The event you want to influence the synthetic click.
+   */
+  sourceEvent?: ActivationEventEsque;
+}
+/**
+ * Base class for creating custom elements with Preact.
+ * While this class could be used in both Node and the browser, the constructor will only be used in the browser.
+ * So we give it a type of HTMLElement to avoid typing issues later where it's used, which will only happen in the browser.
+ */
+declare const BaseClass: typeof globalThis.HTMLElement;
+declare abstract class PreactCustomElement extends BaseClass {
+  /** @private */
+  static get observedAttributes(): string[];
+  constructor({
+    styles,
+    ShadowRoot: renderFunction,
+    delegatesFocus,
+    ...options
+  }: RenderImpl);
+
+  /** @private */
+  setAttribute(name: string, value: string): void;
+  /** @private */
+  attributeChangedCallback(name: string): void;
+  /** @private */
+  connectedCallback(): void;
+  /** @private */
+  disconnectedCallback(): void;
+  /** @private */
+  adoptedCallback(): void;
+  /**
+   * Queue a run of the render function.
+   * You shouldn't need to call this manually - it should be handled by changes to @property values.
+   * @private
+   */
+  queueRender(): void;
+  /**
+   * Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.
+   *
+   * For example, if the `sourceEvent` was a middle click, or has particular keys held down,
+   * components will attempt to produce the desired behavior on links, such as opening the page in the background tab.
+   * @private
+   * @param options
+   */
+  click({sourceEvent}?: ClickOptions): void;
+}
+
+export interface QueryContainerProps
+  extends Required<Pick<QueryContainerProps$1, 'id' | 'containerName'>> {}
+
+declare class QueryContainer
+  extends PreactCustomElement
+  implements QueryContainerProps
+{
+  accessor containerName: QueryContainerProps['containerName'];
+  /** @private */
+  static globalStylesApplied: boolean;
+  constructor();
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName]: QueryContainer;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName]: Omit<
+        HTMLAttributes<HTMLElement>,
+        Extract<keyof HTMLAttributes<HTMLElement>, `on${Capitalize<string>}`>
+      > &
+        QueryContainerJSXProps;
+    }
+  }
+}
+
+declare const tagName = 's-query-container';
+export interface QueryContainerJSXProps
+  extends Partial<QueryContainerProps$1>,
+    Pick<QueryContainerProps$1, 'id'> {}
+
+export {QueryContainer};
+export type {QueryContainerJSXProps};

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.0.0 **/
+/** VERSION: 1.10.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -68,18 +68,12 @@ declare abstract class PreactCustomElement extends BaseClass {
   click({sourceEvent}?: ClickOptions): void;
 }
 
-export type CallbackEvent<
-  TTagName extends keyof HTMLElementTagNameMap,
-  TEvent extends Event = Event,
-> = TEvent & {
-  currentTarget: HTMLElementTagNameMap[TTagName];
+export type CallbackEvent<T extends keyof HTMLElementTagNameMap> = Event & {
+  currentTarget: HTMLElementTagNameMap[T];
 };
-export type CallbackEventListener<
-  TTagName extends keyof HTMLElementTagNameMap,
-  TEvent extends Event = Event,
-> =
+export type CallbackEventListener<T extends keyof HTMLElementTagNameMap> =
   | (EventListener & {
-      (event: CallbackEvent<TTagName, TEvent>): void;
+      (event: CallbackEvent<T>): void;
     })
   | null;
 export interface FieldReactProps<T extends keyof HTMLElementTagNameMap> {
@@ -88,6 +82,15 @@ export interface FieldReactProps<T extends keyof HTMLElementTagNameMap> {
   onFocus?: ((event: CallbackEvent<T>) => void) | null;
   onBlur?: ((event: CallbackEvent<T>) => void) | null;
 }
+/** Used when an element does not have children. */
+export interface PreactBaseElementProps<TClass extends HTMLElement> {
+  /** Assigns a unique key to this element. */
+  key?: preact.Key;
+  /** Assigns a ref (generally from `useRef()`) to this element. */
+  ref?: preact.Ref<TClass>;
+  /** Assigns this element to a parent's slot. */
+  slot?: Lowercase<string>;
+}
 
 declare const internals: unique symbol;
 export type PreactInputProps = Required<
@@ -190,6 +193,9 @@ declare class PreactFieldElement<Autocomplete extends string = string>
 }
 
 export type SearchFieldProps = PreactFieldProps<
+  /**
+   * @default 'on'
+   */
   Required<TextFieldProps>['autocomplete']
 > &
   Required<
@@ -225,13 +231,9 @@ declare global {
   }
 }
 declare module 'preact' {
-  interface BaseProps {
-    children?: preact.ComponentChildren;
-    slot?: Lowercase<string>;
-  }
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: SearchFieldJSXProps & BaseProps;
+      [tagName]: SearchFieldJSXProps & PreactBaseElementProps<SearchField>;
     }
   }
 }

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.0.0 **/
+/** VERSION: 1.10.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -78,6 +78,21 @@ declare abstract class PreactCustomElement extends BaseClass {
   click({sourceEvent}?: ClickOptions): void;
 }
 
+/** Used when an element does not have children. */
+export interface PreactBaseElementProps<TClass extends HTMLElement> {
+  /** Assigns a unique key to this element. */
+  key?: preact.Key;
+  /** Assigns a ref (generally from `useRef()`) to this element. */
+  ref?: preact.Ref<TClass>;
+  /** Assigns this element to a parent's slot. */
+  slot?: Lowercase<string>;
+}
+/** Used when an element has children. */
+export interface PreactBaseElementPropsWithChildren<TClass extends HTMLElement>
+  extends PreactBaseElementProps<TClass> {
+  children?: preact.ComponentChildren;
+}
+
 declare class Section extends PreactCustomElement implements SectionProps {
   constructor();
   /** @private */
@@ -92,13 +107,9 @@ declare global {
   }
 }
 declare module 'preact' {
-  interface BaseProps {
-    children?: preact.ComponentChildren;
-    slot?: Lowercase<string>;
-  }
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: SectionJSXProps & BaseProps;
+      [tagName]: SectionJSXProps & PreactBaseElementPropsWithChildren<Section>;
     }
   }
 }

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

@@ -2,4 +2,8 @@
   <s-option value="1">Today</s-option>
   <s-option value="2">Yesterday</s-option>
   <s-option value="3">Last 7 days</s-option>
+  <s-option-group label="Custom ranges">
+    <s-option value="4">Last 30 days</s-option>
+    <s-option value="5">Last 90 days</s-option>
+  </s-option-group>
 </s-select>

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.0.0 **/
+/** VERSION: 1.10.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -72,20 +72,28 @@ declare abstract class PreactCustomElement extends BaseClass {
   click({sourceEvent}?: ClickOptions): void;
 }
 
-export type CallbackEvent<
-  TTagName extends keyof HTMLElementTagNameMap,
-  TEvent extends Event = Event,
-> = TEvent & {
-  currentTarget: HTMLElementTagNameMap[TTagName];
+export type CallbackEvent<T extends keyof HTMLElementTagNameMap> = Event & {
+  currentTarget: HTMLElementTagNameMap[T];
 };
-export type CallbackEventListener<
-  TTagName extends keyof HTMLElementTagNameMap,
-  TEvent extends Event = Event,
-> =
+export type CallbackEventListener<T extends keyof HTMLElementTagNameMap> =
   | (EventListener & {
-      (event: CallbackEvent<TTagName, TEvent>): void;
+      (event: CallbackEvent<T>): void;
     })
   | null;
+/** Used when an element does not have children. */
+export interface PreactBaseElementProps<TClass extends HTMLElement> {
+  /** Assigns a unique key to this element. */
+  key?: preact.Key;
+  /** Assigns a ref (generally from `useRef()`) to this element. */
+  ref?: preact.Ref<TClass>;
+  /** Assigns this element to a parent's slot. */
+  slot?: Lowercase<string>;
+}
+/** Used when an element has children. */
+export interface PreactBaseElementPropsWithChildren<TClass extends HTMLElement>
+  extends PreactBaseElementProps<TClass> {
+  children?: preact.ComponentChildren;
+}
 
 declare const internals: unique symbol;
 export type PreactInputProps = Required<
@@ -164,13 +172,9 @@ declare global {
   }
 }
 declare module 'preact' {
-  interface BaseProps {
-    children?: preact.ComponentChildren;
-    slot?: Lowercase<string>;
-  }
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: SelectJSXProps & BaseProps;
+      [tagName]: SelectJSXProps & PreactBaseElementPropsWithChildren<Select>;
     }
   }
 }