@porsche-design-system/components-react 3.29.0-rc.1 → 3.29.0-rc.3

package/CHANGELOG.md

@@ -14,6 +14,19 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [3.29.0-rc.3] - 2025-07-29
+
+### Fixed
+
+- Partials: `topLevelAwait` issue in ESM build
+  ([#3947](https://github.com/porsche-design-system/porsche-design-system/pull/3947))
+
+## [3.29.0-rc.2] - 2025-07-28
+
+### Changed
+
+- Partials: provide CJS & ESM build ([#3945](https://github.com/porsche-design-system/porsche-design-system/pull/3945))
+
 ## [3.29.0-rc.1] - 2025-07-15
 
 ### Added
@@ -24,6 +37,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
   ([#3916](https://github.com/porsche-design-system/porsche-design-system/pull/3916))
 - `Input Text`: `counter` prop functions independently of `max-length`, allowing character count display even when no
   limit is set ([#3901](https://github.com/porsche-design-system/porsche-design-system/pull/3901))
+- `Input Email`: ([#3927](https://github.com/porsche-design-system/porsche-design-system/pull/3927))
 
 ### Changed
 
@@ -31,7 +45,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
   ([#3917](https://github.com/porsche-design-system/porsche-design-system/pull/3917))
 - Angular: updated peer dependency to `>=20.0.0 <21.0.0`
 - **Breaking Change** `Textarea`:
-
   - Renamed the `showCounter` prop to `counter`.
   - Changed default behavior: the `counter` is now disabled by default (`false` instead of `true`).
 
@@ -54,6 +67,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 - `Carousel`: component does not work correctly if an invalid `lang` value is provided
   ([#3924](https://github.com/porsche-design-system/porsche-design-system/pull/3924))
+- Vue: fixed initial render for `dark` and `auto` themes in `PorscheDesignSystemProvider`
+  ([#3898](https://github.com/porsche-design-system/porsche-design-system/pull/3898))
 
 ## [3.29.0-rc.0] - 2025-06-27
 

package/cjs/lib/components/input-email.wrapper.cjs

@@ -0,0 +1,29 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+
+const PInputEmail = /*#__PURE__*/ react.forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, multiple = false, name, onBlur, onChange, onInput, pattern, placeholder = '', readOnly = false, required = false, state = 'none', theme, value = '', className, ...rest }, ref) => {
+    const elementRef = react.useRef(undefined);
+    hooks.useEventCallback(elementRef, 'blur', onBlur);
+    hooks.useEventCallback(elementRef, 'change', onChange);
+    hooks.useEventCallback(elementRef, 'input', onInput);
+    const WebComponentTag = hooks.usePrefix('p-input-email');
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, multiple, name, pattern, placeholder, readOnly, required, state, theme || hooks.useTheme(), value];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'multiple', 'name', 'pattern', 'placeholder', 'readOnly', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PInputEmail = PInputEmail;

package/cjs/public-api.cjs

@@ -29,6 +29,7 @@ var heading_wrapper = require('./lib/components/heading.wrapper.cjs');
 var headline_wrapper = require('./lib/components/headline.wrapper.cjs');
 var icon_wrapper = require('./lib/components/icon.wrapper.cjs');
 var inlineNotification_wrapper = require('./lib/components/inline-notification.wrapper.cjs');
+var inputEmail_wrapper = require('./lib/components/input-email.wrapper.cjs');
 var inputNumber_wrapper = require('./lib/components/input-number.wrapper.cjs');
 var inputPassword_wrapper = require('./lib/components/input-password.wrapper.cjs');
 var inputSearch_wrapper = require('./lib/components/input-search.wrapper.cjs');
@@ -118,6 +119,7 @@ exports.PHeading = heading_wrapper.PHeading;
 exports.PHeadline = headline_wrapper.PHeadline;
 exports.PIcon = icon_wrapper.PIcon;
 exports.PInlineNotification = inlineNotification_wrapper.PInlineNotification;
+exports.PInputEmail = inputEmail_wrapper.PInputEmail;
 exports.PInputNumber = inputNumber_wrapper.PInputNumber;
 exports.PInputPassword = inputPassword_wrapper.PInputPassword;
 exports.PInputSearch = inputSearch_wrapper.PInputSearch;

package/esm/hooks.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { useContext, useEffect, useRef, useMemo, useLayoutEffect } from 'react';
+import { useLayoutEffect, useEffect, useContext, useRef, useMemo } from 'react';
 import { PorscheDesignSystemContext } from './provider.mjs';
 import { getMergedClassName } from './utils.mjs';
 

package/esm/lib/components/index.d.ts

@@ -26,6 +26,7 @@ export * from './heading.wrapper';
 export * from './headline.wrapper';
 export * from './icon.wrapper';
 export * from './inline-notification.wrapper';
+export * from './input-email.wrapper';
 export * from './input-number.wrapper';
 export * from './input-password.wrapper';
 export * from './input-search.wrapper';

package/esm/lib/components/input-email.wrapper.d.ts

@@ -0,0 +1,200 @@
+import type { BaseProps } from '../../BaseProps';
+import type { BreakpointCustomizable, InputEmailBlurEventDetail, InputEmailChangeEventDetail, InputEmailInputEventDetail, InputEmailState, Theme } from '../types';
+export type PInputEmailProps = BaseProps & {
+    /**
+     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='email').
+     */
+    autoComplete?: string;
+    /**
+     * A boolean value that, if present, renders the input field as a compact version.
+     */
+    compact?: boolean;
+    /**
+     * Supplementary text providing more context or explanation for the input.
+     */
+    description?: string;
+    /**
+     * A boolean value that, if present, makes the input field unusable and unclickable. The value will not be submitted with the form.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
+     */
+    form?: string;
+    /**
+     * Controls the visibility of the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * Controls the visibility of an email icon.
+     */
+    indicator?: boolean;
+    /**
+     * Text content for a user-facing label.
+     */
+    label?: string;
+    /**
+     * @experimental Shows a loading indicator.
+     */
+    loading?: boolean;
+    /**
+     * A non-negative integer specifying the maximum number of characters the user can enter into the input.
+     */
+    maxLength?: number;
+    /**
+     * Dynamic feedback text for validation or status.
+     */
+    message?: string;
+    /**
+     * A non-negative integer specifying the minimum number of characters required for the input's value to be considered valid.
+     */
+    minLength?: number;
+    /**
+     * A boolean value that, if present, it allows the user to enter a list of multiple email addresses, separated by commas (and optional whitespace). The browser will validate each email address in the list.
+     */
+    multiple?: boolean;
+    /**
+     * The name of the input field, used when submitting the form data.
+     */
+    name: string;
+    /**
+     * Emitted when the email input has lost focus.
+     */
+    onBlur?: (event: CustomEvent<InputEmailBlurEventDetail>) => void;
+    /**
+     * Emitted when the email input loses focus after its value was changed.
+     */
+    onChange?: (event: CustomEvent<InputEmailChangeEventDetail>) => void;
+    /**
+     * Emitted when the value has been changed as a direct result of a user action.
+     */
+    onInput?: (event: CustomEvent<InputEmailInputEventDetail>) => void;
+    /**
+     * Specifies a regular expression that the input's value must match for the value to pass constraint validation. This allows for more specific email validation rules than the browser's default (e.g., restricting to a specific domain). If provided, it overrides the browser's default email validation.
+     */
+    pattern?: string;
+    /**
+     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='you@example.com'). This text is displayed when the input field is empty.
+     */
+    placeholder?: string;
+    /**
+     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
+     */
+    readOnly?: boolean;
+    /**
+     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * Indicates the validation or overall status of the input component.
+     */
+    state?: InputEmailState;
+    /**
+     * Controls the visual appearance of the component.
+     */
+    theme?: Theme;
+    /**
+     * The default email address (or comma-separated list of addresses) for the input.
+     */
+    value?: string;
+};
+export declare const PInputEmail: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='email').
+     */
+    autoComplete?: string;
+    /**
+     * A boolean value that, if present, renders the input field as a compact version.
+     */
+    compact?: boolean;
+    /**
+     * Supplementary text providing more context or explanation for the input.
+     */
+    description?: string;
+    /**
+     * A boolean value that, if present, makes the input field unusable and unclickable. The value will not be submitted with the form.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
+     */
+    form?: string;
+    /**
+     * Controls the visibility of the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * Controls the visibility of an email icon.
+     */
+    indicator?: boolean;
+    /**
+     * Text content for a user-facing label.
+     */
+    label?: string;
+    /**
+     * @experimental Shows a loading indicator.
+     */
+    loading?: boolean;
+    /**
+     * A non-negative integer specifying the maximum number of characters the user can enter into the input.
+     */
+    maxLength?: number;
+    /**
+     * Dynamic feedback text for validation or status.
+     */
+    message?: string;
+    /**
+     * A non-negative integer specifying the minimum number of characters required for the input's value to be considered valid.
+     */
+    minLength?: number;
+    /**
+     * A boolean value that, if present, it allows the user to enter a list of multiple email addresses, separated by commas (and optional whitespace). The browser will validate each email address in the list.
+     */
+    multiple?: boolean;
+    /**
+     * The name of the input field, used when submitting the form data.
+     */
+    name: string;
+    /**
+     * Emitted when the email input has lost focus.
+     */
+    onBlur?: (event: CustomEvent<InputEmailBlurEventDetail>) => void;
+    /**
+     * Emitted when the email input loses focus after its value was changed.
+     */
+    onChange?: (event: CustomEvent<InputEmailChangeEventDetail>) => void;
+    /**
+     * Emitted when the value has been changed as a direct result of a user action.
+     */
+    onInput?: (event: CustomEvent<InputEmailInputEventDetail>) => void;
+    /**
+     * Specifies a regular expression that the input's value must match for the value to pass constraint validation. This allows for more specific email validation rules than the browser's default (e.g., restricting to a specific domain). If provided, it overrides the browser's default email validation.
+     */
+    pattern?: string;
+    /**
+     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='you@example.com'). This text is displayed when the input field is empty.
+     */
+    placeholder?: string;
+    /**
+     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
+     */
+    readOnly?: boolean;
+    /**
+     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * Indicates the validation or overall status of the input component.
+     */
+    state?: InputEmailState;
+    /**
+     * Controls the visual appearance of the component.
+     */
+    theme?: Theme;
+    /**
+     * The default email address (or comma-separated list of addresses) for the input.
+     */
+    value?: string;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/input-email.wrapper.mjs

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PInputEmail = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, multiple = false, name, onBlur, onChange, onInput, pattern, placeholder = '', readOnly = false, required = false, state = 'none', theme, value = '', className, ...rest }, ref) => {
+    const elementRef = useRef(undefined);
+    useEventCallback(elementRef, 'blur', onBlur);
+    useEventCallback(elementRef, 'change', onChange);
+    useEventCallback(elementRef, 'input', onInput);
+    const WebComponentTag = usePrefix('p-input-email');
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, multiple, name, pattern, placeholder, readOnly, required, state, theme || useTheme(), value];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'multiple', 'name', 'pattern', 'placeholder', 'readOnly', 'required', 'state', 'theme', 'value'].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 { PInputEmail };

package/esm/lib/components/input-number.wrapper.d.ts

@@ -1,12 +1,12 @@
 import type { BaseProps } from '../../BaseProps';
-import type { InputNumberAutoComplete, BreakpointCustomizable, InputNumberBlurEventDetail, InputNumberChangeEventDetail, InputNumberInputEventDetail, InputNumberState, Theme } from '../types';
+import type { BreakpointCustomizable, InputNumberBlurEventDetail, InputNumberChangeEventDetail, InputNumberInputEventDetail, InputNumberState, Theme } from '../types';
 export type PInputNumberProps = BaseProps & {
     /**
-     * Specifies whether the input can be autofilled by the browser
+     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='on').
      */
-    autoComplete?: InputNumberAutoComplete;
+    autoComplete?: string;
     /**
-     * Displays as a compact version.
+     * A boolean value that, if present, renders the input field as a compact version.
      */
     compact?: boolean;
     /**
@@ -14,23 +14,23 @@ export type PInputNumberProps = BaseProps & {
      */
     controls?: boolean;
     /**
-     * The description text.
+     * Supplementary text providing more context or explanation for the input.
      */
     description?: string;
     /**
-     * Marks the number input as disabled.
+     * A boolean value that, if present, makes the input field unusable and unclickable. The value will not be submitted with the form.
      */
     disabled?: boolean;
     /**
-     * The id of a form element the number input should be associated with.
+     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
      */
     form?: string;
     /**
-     * Show or hide label and description text. For better accessibility, it is recommended to show the label.
+     * Controls the visibility of the label.
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
-     * The label text.
+     * Text content for a user-facing label.
      */
     label?: string;
     /**
@@ -42,7 +42,7 @@ export type PInputNumberProps = BaseProps & {
      */
     max?: number;
     /**
-     * The message styled depending on validation state.
+     * Dynamic feedback text for validation or status.
      */
     message?: string;
     /**
@@ -50,7 +50,7 @@ export type PInputNumberProps = BaseProps & {
      */
     min?: number;
     /**
-     * The name of the number input.
+     * The name of the input field, used when submitting the form data.
      */
     name: string;
     /**
@@ -66,19 +66,19 @@ export type PInputNumberProps = BaseProps & {
      */
     onInput?: (event: CustomEvent<InputNumberInputEventDetail>) => void;
     /**
-     * The placeholder text.
+     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='Enter a number'). This text is displayed when the input field is empty.
      */
     placeholder?: string;
     /**
-     * Specifies whether the number input should be read-only.
+     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
      */
     readOnly?: boolean;
     /**
-     * Marks the number input as required.
+     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
      */
     required?: boolean;
     /**
-     * The validation state.
+     * Indicates the validation or overall status of the input component.
      */
     state?: InputNumberState;
     /**
@@ -86,7 +86,7 @@ export type PInputNumberProps = BaseProps & {
      */
     step?: number;
     /**
-     * Adapts the color depending on the theme.
+     * Controls the visual appearance of the component.
      */
     theme?: Theme;
     /**
@@ -96,11 +96,11 @@ export type PInputNumberProps = BaseProps & {
 };
 export declare const PInputNumber: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Specifies whether the input can be autofilled by the browser
+     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='on').
      */
-    autoComplete?: InputNumberAutoComplete;
+    autoComplete?: string;
     /**
-     * Displays as a compact version.
+     * A boolean value that, if present, renders the input field as a compact version.
      */
     compact?: boolean;
     /**
@@ -108,23 +108,23 @@ export declare const PInputNumber: import("react").ForwardRefExoticComponent<imp
      */
     controls?: boolean;
     /**
-     * The description text.
+     * Supplementary text providing more context or explanation for the input.
      */
     description?: string;
     /**
-     * Marks the number input as disabled.
+     * A boolean value that, if present, makes the input field unusable and unclickable. The value will not be submitted with the form.
      */
     disabled?: boolean;
     /**
-     * The id of a form element the number input should be associated with.
+     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
      */
     form?: string;
     /**
-     * Show or hide label and description text. For better accessibility, it is recommended to show the label.
+     * Controls the visibility of the label.
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
-     * The label text.
+     * Text content for a user-facing label.
      */
     label?: string;
     /**
@@ -136,7 +136,7 @@ export declare const PInputNumber: import("react").ForwardRefExoticComponent<imp
      */
     max?: number;
     /**
-     * The message styled depending on validation state.
+     * Dynamic feedback text for validation or status.
      */
     message?: string;
     /**
@@ -144,7 +144,7 @@ export declare const PInputNumber: import("react").ForwardRefExoticComponent<imp
      */
     min?: number;
     /**
-     * The name of the number input.
+     * The name of the input field, used when submitting the form data.
      */
     name: string;
     /**
@@ -160,19 +160,19 @@ export declare const PInputNumber: import("react").ForwardRefExoticComponent<imp
      */
     onInput?: (event: CustomEvent<InputNumberInputEventDetail>) => void;
     /**
-     * The placeholder text.
+     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='Enter a number'). This text is displayed when the input field is empty.
      */
     placeholder?: string;
     /**
-     * Specifies whether the number input should be read-only.
+     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
      */
     readOnly?: boolean;
     /**
-     * Marks the number input as required.
+     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
      */
     required?: boolean;
     /**
-     * The validation state.
+     * Indicates the validation or overall status of the input component.
      */
     state?: InputNumberState;
     /**
@@ -180,7 +180,7 @@ export declare const PInputNumber: import("react").ForwardRefExoticComponent<imp
      */
     step?: number;
     /**
-     * Adapts the color depending on the theme.
+     * Controls the visual appearance of the component.
      */
     theme?: Theme;
     /**