@porsche-design-system/components-react 3.16.0-rc.2 → 3.17.0-rc.0

package/esm/lib/components/link-tile-product.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, LinkTileProductAspectRatio, LinkTileProductLikeEventDetail, LinkTileProductTarget, Theme } from '../types';
 export type PLinkTileProductProps = BaseProps & {
@@ -55,11 +54,11 @@ export declare const PLinkTileProduct: import("react").ForwardRefExoticComponent
     /**
      * Aspect ratio of the link-tile-product.
      */
-    aspectRatio?: BreakpointCustomizable<LinkTileProductAspectRatio> | undefined;
+    aspectRatio?: BreakpointCustomizable<LinkTileProductAspectRatio>;
     /**
      * Additional product description.
      */
-    description?: string | undefined;
+    description?: string;
     /**
      * Product heading.
      */
@@ -67,19 +66,19 @@ export declare const PLinkTileProduct: import("react").ForwardRefExoticComponent
     /**
      * href of the `<a>`.
      */
-    href?: string | undefined;
+    href?: string;
     /**
      * A Boolean attribute indicating that a like button should be shown.
      */
-    likeButton?: boolean | undefined;
+    likeButton?: boolean;
     /**
      * A Boolean attribute indicating that a product is liked.
      */
-    liked?: boolean | undefined;
+    liked?: boolean;
     /**
      * Emitted when the like button is clicked.
      */
-    onLike?: ((event: CustomEvent<LinkTileProductLikeEventDetail>) => void) | undefined;
+    onLike?: (event: CustomEvent<LinkTileProductLikeEventDetail>) => void;
     /**
      * Product retail price (with or without discount).
      */
@@ -87,19 +86,19 @@ export declare const PLinkTileProduct: import("react").ForwardRefExoticComponent
     /**
      * Shows original price (recommended retail price) with line-through. Needs prop "price" to be defined, otherwise this prop has no effect.
      */
-    priceOriginal?: string | undefined;
+    priceOriginal?: string;
     /**
      * Specifies the relationship of the target object to the link object.
      */
-    rel?: string | undefined;
+    rel?: string;
     /**
      * Target attribute where the link should be opened.
      */
-    target?: string | undefined;
+    target?: LinkTileProductTarget;
     /**
      * Adapts the link-tile-product color depending on the theme.
      */
-    theme?: "light" | "dark" | "auto" | undefined;
+    theme?: Theme;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/link-tile.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { LinkTileAlign, SelectedAriaAttributes, LinkTileAriaAttribute, BreakpointCustomizable, LinkTileAspectRatio, LinkTileBackground, LinkTileSize, LinkTileTarget, LinkTileWeight } from '../types';
 export type PLinkTileProps = BaseProps & {
@@ -63,23 +62,23 @@ export declare const PLinkTile: import("react").ForwardRefExoticComponent<import
     /**
      * Alignment of link and description.
      */
-    align?: "top" | "bottom" | undefined;
+    align?: LinkTileAlign;
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<"aria-current" | "aria-label"> | undefined;
+    aria?: SelectedAriaAttributes<LinkTileAriaAttribute>;
     /**
      * Aspect ratio of the link-tile.
      */
-    aspectRatio?: BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16"> | undefined;
+    aspectRatio?: BreakpointCustomizable<LinkTileAspectRatio>;
     /**
      * Adapts the description and link theme when used on light background image.
      */
-    background?: "light" | "dark" | "auto" | undefined;
+    background?: LinkTileBackground;
     /**
      * Displays the link-tile as compact version with description and link icon only.
      */
-    compact?: BreakpointCustomizable<boolean> | undefined;
+    compact?: BreakpointCustomizable<boolean>;
     /**
      * Description text.
      */
@@ -87,11 +86,11 @@ export declare const PLinkTile: import("react").ForwardRefExoticComponent<import
     /**
      * Special download attribute to open native browser download dialog if target url points to a downloadable file.
      */
-    download?: string | undefined;
+    download?: string;
     /**
      * Show gradient.
      */
-    gradient?: boolean | undefined;
+    gradient?: boolean;
     /**
      * href of the `<a>`.
      */
@@ -103,19 +102,19 @@ export declare const PLinkTile: import("react").ForwardRefExoticComponent<import
     /**
      * Specifies the relationship of the target object to the link object.
      */
-    rel?: string | undefined;
+    rel?: string;
     /**
      * Font size of the description.
      */
-    size?: BreakpointCustomizable<"default" | "inherit"> | undefined;
+    size?: BreakpointCustomizable<LinkTileSize>;
     /**
      * Target attribute where the link should be opened.
      */
-    target?: string | undefined;
+    target?: LinkTileTarget;
     /**
      * Font weight of the description.
      */
-    weight?: BreakpointCustomizable<"regular" | "semi-bold" | "semibold"> | undefined;
+    weight?: BreakpointCustomizable<LinkTileWeight>;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/link-tile.wrapper.mjs

@@ -4,7 +4,7 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PLinkTile = forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', background = 'dark', compact = false, description, download, gradient = true, href, label, rel, size = 'default', target = '_self', weight = 'semi-bold', className, ...rest }, ref) => {
+const PLinkTile = forwardRef(({ align = 'bottom', aria, aspectRatio = '4/3', background = 'dark', compact = false, description, download, gradient = true, href, label, rel, size = 'medium', target = '_self', weight = 'semi-bold', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-link-tile');
     const propsToSync = [align, aria, aspectRatio, background, compact, description, download, gradient, href, label, rel, size, target, weight];

package/esm/lib/components/link.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, LinkAriaAttribute, BreakpointCustomizable, LinkIcon, LinkTarget, Theme, LinkVariant } from '../types';
 export type PLinkProps = BaseProps & {
@@ -47,43 +46,43 @@ export declare const PLink: import("react").ForwardRefExoticComponent<import("re
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<"aria-current" | "aria-label"> | undefined;
+    aria?: SelectedAriaAttributes<LinkAriaAttribute>;
     /**
      * Special download attribute to open native browser download dialog if target url points to a downloadable file.
      */
-    download?: string | undefined;
+    download?: string;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */
-    hideLabel?: BreakpointCustomizable<boolean> | undefined;
+    hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * When providing an url then the component will be rendered as `<a>`.
      */
-    href?: string | undefined;
+    href?: string;
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: import("../types").LinkButtonIconName | undefined;
+    icon?: LinkIcon;
     /**
      * A URL path to a custom icon.
      */
-    iconSource?: string | undefined;
+    iconSource?: string;
     /**
      * Specifies the relationship of the target object to the link object.
      */
-    rel?: string | undefined;
+    rel?: string;
     /**
      * Target attribute where the link should be opened.
      */
-    target?: string | undefined;
+    target?: LinkTarget;
     /**
      * Adapts the link color when used on dark background.
      */
-    theme?: "light" | "dark" | "auto" | undefined;
+    theme?: Theme;
     /**
      * The style variant of the link.
      */
-    variant?: "primary" | "secondary" | "tertiary" | undefined;
+    variant?: LinkVariant;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/marque.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, MarqueAriaAttribute, MarqueSize, MarqueTarget, MarqueVariant } from '../types';
 export type PMarqueProps = BaseProps & {
@@ -32,25 +31,25 @@ export declare const PMarque: import("react").ForwardRefExoticComponent<import("
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<"aria-current" | "aria-label"> | undefined;
+    aria?: SelectedAriaAttributes<MarqueAriaAttribute>;
     /**
      * When providing an url then the component will be rendered as `<a>`.
      */
-    href?: string | undefined;
+    href?: string;
     /**
      * Adapts sizing of marque.
      */
-    size?: "small" | "medium" | "responsive" | undefined;
+    size?: MarqueSize;
     /**
      * Target attribute where the link should be opened.
      */
-    target?: string | undefined;
+    target?: MarqueTarget;
     /**
      * Show/hide trademark sign (only has effect when variant is set to default).
      */
-    trademark?: boolean | undefined;
+    trademark?: boolean;
     /**
      * Shows marque in special editions
      */
-    variant?: "default" | "75-years" | undefined;
+    variant?: MarqueVariant;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/modal.wrapper.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaAttributes, ModalAriaAttribute, ModalBackdrop, BreakpointCustomizable, Theme } from '../types';
+import type { SelectedAriaAttributes, ModalAriaAttribute, ModalBackdrop, BreakpointCustomizable, ModalMotionHiddenEndEventDetail, ModalMotionVisibleEndEventDetail, Theme } from '../types';
 export type PModalProps = BaseProps & {
     /**
      * Add ARIA attributes.
@@ -39,6 +38,14 @@ export type PModalProps = BaseProps & {
      * Emitted when the component requests to be dismissed.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when the modal is closed and the transition is finished.
+     */
+    onMotionHiddenEnd?: (event: CustomEvent<ModalMotionHiddenEndEventDetail>) => void;
+    /**
+     * Emitted when the modal is opened and the transition is finished.
+     */
+    onMotionVisibleEnd?: (event: CustomEvent<ModalMotionVisibleEndEventDetail>) => void;
     /**
      * If true, the modal is open.
      */
@@ -52,40 +59,48 @@ export declare const PModal: import("react").ForwardRefExoticComponent<import("r
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<"aria-label"> | undefined;
+    aria?: SelectedAriaAttributes<ModalAriaAttribute>;
     /**
      * Defines the backdrop, 'blur' (should be used when Modal is opened by user interaction, e.g. after a click on a button) and 'shading' (should be used when Modal gets opened automatically, e.g. Cookie Consent).
      */
-    backdrop?: "blur" | "shading" | undefined;
+    backdrop?: ModalBackdrop;
     /**
      * If true, the modal will not be closable via backdrop click.
      */
-    disableBackdropClick?: boolean | undefined;
+    disableBackdropClick?: boolean;
     /**
      * If true, the modal will not have a dismiss button.
      * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead.
      */
-    disableCloseButton?: boolean | undefined;
+    disableCloseButton?: boolean;
     /**
      * If false, the modal will not have a dismiss button.
      */
-    dismissButton?: boolean | undefined;
+    dismissButton?: boolean;
     /**
      * If true the modal uses max viewport height and width. Should only be used for mobile.
      */
-    fullscreen?: BreakpointCustomizable<boolean> | undefined;
+    fullscreen?: BreakpointCustomizable<boolean>;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `header` slot instead The title of the modal
      */
-    heading?: string | undefined;
+    heading?: string;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `dismiss` event instead. Emitted when the component requests to be dismissed.
      */
-    onClose?: ((event: CustomEvent<void>) => void) | undefined;
+    onClose?: (event: CustomEvent<void>) => void;
     /**
      * Emitted when the component requests to be dismissed.
      */
-    onDismiss?: ((event: CustomEvent<void>) => void) | undefined;
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when the modal is closed and the transition is finished.
+     */
+    onMotionHiddenEnd?: (event: CustomEvent<ModalMotionHiddenEndEventDetail>) => void;
+    /**
+     * Emitted when the modal is opened and the transition is finished.
+     */
+    onMotionVisibleEnd?: (event: CustomEvent<ModalMotionVisibleEndEventDetail>) => void;
     /**
      * If true, the modal is open.
      */
@@ -93,7 +108,7 @@ export declare const PModal: import("react").ForwardRefExoticComponent<import("r
     /**
      * Adapts the modal color depending on the theme.
      */
-    theme?: "light" | "dark" | "auto" | undefined;
+    theme?: Theme;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/modal.wrapper.mjs

@@ -4,10 +4,12 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PModal = forwardRef(({ aria, backdrop = 'blur', disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, theme, className, ...rest }, ref) => {
+const PModal = forwardRef(({ aria, backdrop = 'blur', disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'close', onClose);
     useEventCallback(elementRef, 'dismiss', onDismiss);
+    useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
+    useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
     const WebComponentTag = usePrefix('p-modal');
     const propsToSync = [aria, backdrop, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme || useTheme()];
     useBrowserLayoutEffect(() => {

package/esm/lib/components/model-signature.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { ModelSignatureColor, ModelSignatureFetchPriority, ModelSignatureModel, ModelSignatureSize, Theme } from '../types';
 export type PModelSignatureProps = BaseProps & {
@@ -35,31 +34,31 @@ export declare const PModelSignature: import("react").ForwardRefExoticComponent<
     /**
      * Adapts the color of the component.
      */
-    color?: "inherit" | "primary" | "contrast-low" | "contrast-medium" | "contrast-high" | undefined;
+    color?: ModelSignatureColor;
     /**
      * Defines the fetch priority of the model signature. In the end it is just a recommendation to the browser, but it defines the priority on its own.
      */
-    fetchPriority?: "auto" | "low" | "high" | undefined;
+    fetchPriority?: ModelSignatureFetchPriority;
     /**
      * Defines whether the model signature is always loaded or only loaded when it is in the viewport (this feature may not work reliably).
      */
-    lazy?: boolean | undefined;
+    lazy?: boolean;
     /**
      * Adapts the model of the component.
      */
-    model?: "718" | "911" | "boxster" | "cayenne" | "cayman" | "macan" | "panamera" | "taycan" | "turbo-s" | "turbo" | undefined;
+    model?: ModelSignatureModel;
     /**
      * When set to `true`, then all model signatures are visually aligned with each other. When set to `false` the model signature comes without any safe zone.
      */
-    safeZone?: boolean | undefined;
+    safeZone?: boolean;
     /**
      * Adapts the size of the component. When set to `inherit` a CSS `width` or `height` needs to be defined on the host but not both.
      */
-    size?: "inherit" | "small" | undefined;
+    size?: ModelSignatureSize;
     /**
      * Adapts color depending on theme.
      */
-    theme?: "light" | "dark" | "auto" | undefined;
+    theme?: Theme;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/multi-select-option.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 export type PMultiSelectOptionProps = BaseProps & {
     /**
@@ -14,11 +13,11 @@ export declare const PMultiSelectOption: import("react").ForwardRefExoticCompone
     /**
      * Disables the option.
      */
-    disabled?: boolean | undefined;
+    disabled?: boolean;
     /**
      * The option value.
      */
     value: string;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/multi-select.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { MultiSelectDropdownDirection, BreakpointCustomizable, MultiSelectUpdateEventDetail, MultiSelectState, Theme } from '../types';
 export type PMultiSelectProps = BaseProps & {
@@ -55,27 +54,27 @@ export declare const PMultiSelect: import("react").ForwardRefExoticComponent<imp
     /**
      * The description text.
      */
-    description?: string | undefined;
+    description?: string;
     /**
      * Disables the multi-select
      */
-    disabled?: boolean | undefined;
+    disabled?: boolean;
     /**
      * Changes the direction to which the dropdown list appears.
      */
-    dropdownDirection?: "auto" | "down" | "up" | undefined;
+    dropdownDirection?: MultiSelectDropdownDirection;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */
-    hideLabel?: BreakpointCustomizable<boolean> | undefined;
+    hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * The label text.
      */
-    label?: string | undefined;
+    label?: string;
     /**
      * The message styled depending on validation state.
      */
-    message?: string | undefined;
+    message?: string;
     /**
      * The name of the control.
      */
@@ -83,23 +82,23 @@ export declare const PMultiSelect: import("react").ForwardRefExoticComponent<imp
     /**
      * Emitted when the selection is changed.
      */
-    onUpdate?: ((event: CustomEvent<MultiSelectUpdateEventDetail>) => void) | undefined;
+    onUpdate?: (event: CustomEvent<MultiSelectUpdateEventDetail>) => void;
     /**
      * A Boolean attribute indicating that an option with a non-empty string value must be selected.
      */
-    required?: boolean | undefined;
+    required?: boolean;
     /**
      * The validation state.
      */
-    state?: "none" | "success" | "error" | undefined;
+    state?: MultiSelectState;
     /**
      * Adapts the select color depending on the theme.
      */
-    theme?: "light" | "dark" | "auto" | undefined;
+    theme?: Theme;
     /**
      * The selected values.
      */
-    value?: string[] | undefined;
+    value?: string[];
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/optgroup.wrapper.d.ts

@@ -0,0 +1,23 @@
+import type { BaseProps } from '../../BaseProps';
+export type POptgroupProps = BaseProps & {
+    /**
+     * Disables the optgroup.
+     */
+    disabled?: boolean;
+    /**
+     * The optgroup label.
+     */
+    label?: string;
+};
+export declare const POptgroup: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Disables the optgroup.
+     */
+    disabled?: boolean;
+    /**
+     * The optgroup label.
+     */
+    label?: string;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/optgroup.wrapper.mjs

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const POptgroup = forwardRef(({ disabled = false, label, className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-optgroup');
+    const propsToSync = [disabled, label];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['disabled', 'label'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { POptgroup };

package/esm/lib/components/pagination.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { PaginationInternationalization, BreakpointCustomizable, PaginationMaxNumberOfPageLinks, PaginationUpdateEventDetail, Theme } from '../types';
 export type PPaginationProps = BaseProps & {
@@ -64,48 +63,48 @@ export declare const PPagination: import("react").ForwardRefExoticComponent<impo
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `intl.root` instead. Aria label what the pagination is used for.
      */
-    allyLabel?: string | undefined;
+    allyLabel?: string;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `intl.next` instead. Aria label for next page icon.
      */
-    allyLabelNext?: string | undefined;
+    allyLabelNext?: string;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `intl.page` instead. Aria label for page navigation.
      */
-    allyLabelPage?: string | undefined;
+    allyLabelPage?: string;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `intl.prev` instead. Aria label for previous page icon.
      */
-    allyLabelPrev?: string | undefined;
+    allyLabelPrev?: string;
     /**
      * Override the default wordings that are used for aria-labels on the next/prev and page buttons.
      */
-    intl?: Partial<Record<"page" | "prev" | "next" | "root", string>> | undefined;
+    intl?: PaginationInternationalization;
     /**
      * The total count of items which should be shown per page.
      */
-    itemsPerPage?: number | undefined;
+    itemsPerPage?: number;
     /**
      * Has no effect anymore
      * @deprecated since v3.10.0, will be removed with next major release
      */
-    maxNumberOfPageLinks?: BreakpointCustomizable<7 | 5> | undefined;
+    maxNumberOfPageLinks?: BreakpointCustomizable<PaginationMaxNumberOfPageLinks>;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when the page changes.
      */
-    onPageChange?: ((event: CustomEvent<PaginationUpdateEventDetail>) => void) | undefined;
+    onPageChange?: (event: CustomEvent<PaginationUpdateEventDetail>) => void;
     /**
      * Emitted when the page changes.
      */
-    onUpdate?: ((event: CustomEvent<PaginationUpdateEventDetail>) => void) | undefined;
+    onUpdate?: (event: CustomEvent<PaginationUpdateEventDetail>) => void;
     /**
      * Show or hide the button to jump to the last page.
      */
-    showLastPage?: boolean | undefined;
+    showLastPage?: boolean;
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "light" | "dark" | "auto" | undefined;
+    theme?: Theme;
     /**
      * The total count of items.
      */