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

package/CHANGELOG.md

@@ -14,6 +14,94 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [4.2.0-rc.2] - 2026-06-04
+
+### Added
+
+- `Tailwind CSS`: CJK `font-family` `:lang()` selectors are available in the theme by default to auto-detect Simplified
+  Chinese, Traditional Chinese, Japanese, and Korean content
+  ([#4354](https://github.com/porsche-design-system/porsche-design-system/pull/4354))
+- `SCSS` ([#4354](https://github.com/porsche-design-system/porsche-design-system/pull/4354)):
+  - `$font-porsche-next-zh-hans`, `$font-porsche-next-zh-hant`, `$font-porsche-next-ja`, `$font-porsche-next-ko`: CJK
+    `font-family` tokens
+  - `cjk-font-family()`: mixin that emits `:lang()` selectors to auto-detect CJK content
+- `Emotion`, `Vanilla Extract` ([#4354](https://github.com/porsche-design-system/porsche-design-system/pull/4354)):
+  - `fontPorscheNextZhHans`, `fontPorscheNextZhHant`, `fontPorscheNextJa`, `fontPorscheNextKo`: CJK `font-family` tokens
+  - `getCJKFontFamilyStyle()`: returns `:lang()` selectors to auto-detect CJK content
+- `Accordion`: `indent` prop to indent the slotted content to be vertically aligned with the text of the summary section
+  ([#4478](https://github.com/porsche-design-system/porsche-design-system/pull/4478))
+
+### Changed
+
+- Improved CJK `font-family` support with dedicated, OS-specific stacks per language
+  ([#4354](https://github.com/porsche-design-system/porsche-design-system/pull/4354)):
+  - **Simplified Chinese:** PingFang SC (macOS), Microsoft YaHei (Windows), Noto Sans SC (Android, Linux, ChromeOS)
+  - **Traditional Chinese:** PingFang TC (macOS), Microsoft JhengHei (Windows), Noto Sans TC (Android, Linux, ChromeOS)
+  - **Japanese:** Hiragino Sans (macOS), Yu Gothic (Windows), Noto Sans JP (Android, Linux, ChromeOS)
+  - **Korean:** Apple SD Gothic Neo (macOS), Malgun Gothic (Windows), Noto Sans KR (Android, Linux, ChromeOS)
+- Text-rendering components now switch to language-specific CJK font stacks via `:lang()` selectors when a matching
+  `lang` attribute is set ([#4354](https://github.com/porsche-design-system/porsche-design-system/pull/4354))
+- `Tailwind CSS` — `.font-porsche-next`, `.prose-heading-*`, `.prose-text-*` now apply `:lang()` selectors to
+  auto-detect CJK content ([#4354](https://github.com/porsche-design-system/porsche-design-system/pull/4354))
+- `SCSS` — `prose-heading-*()`, `prose-text-*()` now apply `:lang()` selectors to auto-detect CJK content
+  ([#4354](https://github.com/porsche-design-system/porsche-design-system/pull/4354))
+- `Emotion`, `Vanilla Extract` — `proseHeading*`, `proseText*` now apply `:lang()` selectors to auto-detect CJK content
+  ([#4354](https://github.com/porsche-design-system/porsche-design-system/pull/4354))
+- `Input Text`: the global `inputmode` attribute is now passed through to the underlying native `input` element
+  ([#4322](https://github.com/porsche-design-system/porsche-design-system/pull/4322))
+- `Input Text`, `Input Number`: extended types of `value` prop to allow `string | number | null`
+  ([#4322](https://github.com/porsche-design-system/porsche-design-system/pull/4322))
+- `Input Date`, `Input Email`, `Input Password`, `Input Search`, `Input Tel`, `Input Time`, `Input Url`, `Textarea`:
+  extended types of `value` prop to allow `string | null`
+  ([#4322](https://github.com/porsche-design-system/porsche-design-system/pull/4322))
+- `Select`, `Select Option`: extended types of `value` prop to allow `string | number | null`
+  ([#4322](https://github.com/porsche-design-system/porsche-design-system/pull/4322))
+- `Multi Select`: extended types of `value` prop to allow `string[] | number[] | null`
+  ([#4322](https://github.com/porsche-design-system/porsche-design-system/pull/4322))
+- `Multi Select Option`: extended types of `value` prop to allow `string | number`
+  ([#4322](https://github.com/porsche-design-system/porsche-design-system/pull/4322))
+- `Tabs`, `Tabs Bar`, `Link Tile`, `Link Tile Product`, `Button Tile`, `Stepper Horizontal`, `Accordion`, `Popover`,
+  `Flyout`, `Modal`, `Sheet`: aligned `border-radius` with the app and car design system for improved visual coherence
+  ([#4447](https://github.com/porsche-design-system/porsche-design-system/pull/4447))
+- `Tabs Bar`: refined active tab background color to improve visual coherence with the app and vehicle design system
+  ([#4447](https://github.com/porsche-design-system/porsche-design-system/pull/4447))
+- `Tabs`, `Tabs Bar`: height now matches `p-button` and `p-link` when `background="none"` is used, so the visual height
+  stays stable when combined with buttons or links
+  ([#4447](https://github.com/porsche-design-system/porsche-design-system/pull/4447))
+
+### Fixed
+
+- `Tailwind CSS`: Prefixing support ([#4354](https://github.com/porsche-design-system/porsche-design-system/pull/4354))
+- `Inline Notification`: The action label expands when the heading or content section becomes multiline
+  ([#4418](https://github.com/porsche-design-system/porsche-design-system/pull/4418))
+- `Input Date`, `Input Email`, `Input Number`, `Input Password`, `Input Search`, `Input Tel`, `Input Text`,
+  `Input Time`, `Input Url`, `Textarea`: form value, validity and `disabled`/`readOnly` state now stay in sync with the
+  internal native control, so native form submission, reset and validation behave correctly when these props change
+  dynamically ([4446](https://github.com/porsche-design-system/porsche-design-system/pull/4446))
+- `Accordion`: not causing scrollbar on outer scroll container (e.g. flyout) when closed with position:absolute slotted
+  content ([#4449](https://github.com/porsche-design-system/porsche-design-system/pull/4449))
+- Added `semibold` alias for Arabic Porsche Next, mapped to `bold` as a fallback since the font only provides `regular`
+  and `bold` weights. ([#4354](https://github.com/porsche-design-system/porsche-design-system/pull/4354))
+- `Flyout`, `Modal`, `Sheet`: the dismiss button now has a solid background to ensure sufficient contrast and a11y
+  compliance when placed above content such as media elements
+  ([#4447](https://github.com/porsche-design-system/porsche-design-system/pull/4447))
+- `Flyout`, `Modal`, `Sheet`: the dialog's rounded corners now clip slotted content (e.g. media elements) so it no
+  longer overflows the dialog's `border-radius`
+  ([#4447](https://github.com/porsche-design-system/porsche-design-system/pull/4447))
+
+### Removed
+
+- Legacy border-radius stylesheet `@porsche-design-system/components-{js|angular|react|vue}/legacy-radius.css`, since
+  visual coherence between web, app and car design system is now achieved
+  ([#4447](https://github.com/porsche-design-system/porsche-design-system/pull/4447))
+
+## [4.2.0-rc.1] - 2026-05-18
+
+### Added
+
+- `Angular`, `Vue`: expose typings for component props (e.g. `PButtonProps`, `PInputProps`, etc.) for better type safety
+  and developer experience ([#4403](https://github.com/porsche-design-system/porsche-design-system/pull/4403))
+
 ## [4.2.0-rc.0] - 2026-05-12
 
 ### Added
@@ -21,6 +109,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 - `AG Grid`:
   - custom compact theme ([#4301](https://github.com/porsche-design-system/porsche-design-system/pull/4301))
   - minor style adjustments ([#4301](https://github.com/porsche-design-system/porsche-design-system/pull/4301))
+- `Ai Tag`: New component to mark AI-generated/AI-modified content
+  ([#4400](https://github.com/porsche-design-system/porsche-design-system/pull/4400))
 
 ## [4.1.0] - 2026-05-06
 
@@ -1070,6 +1160,20 @@ and migration steps.
 - `Multi Select`: trim whitespace of selected options text
   ([#4132](https://github.com/porsche-design-system/porsche-design-system/pull/4132))
 
+## [3.35.0] - 2026-05-06
+
+## [3.35.0-rc.0] - 2026-05-05
+
+### Added
+
+- `AI-Tag`: New component to mark AI-generated/AI-modified content
+  ([#4236](https://github.com/porsche-design-system/porsche-design-system/pull/4236))
+
+### Fixed
+
+- `Multi Select`, `Select`: not correctly updating when options within `p-optgroup` change dynamically
+  ([#4278](https://github.com/porsche-design-system/porsche-design-system/pull/4279))
+
 ## [3.34.0] - 2026-04-09
 
 ## [3.34.0-rc.0] - 2026-04-01

package/cjs/lib/components/accordion.wrapper.cjs

@@ -6,14 +6,14 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PAccordion = /*#__PURE__*/ react.forwardRef(({ alignMarker = 'end', background = 'none', compact, heading, headingTag = 'h2', onUpdate, open, size = 'small', sticky, className, ...rest }, ref) => {
+const PAccordion = /*#__PURE__*/ react.forwardRef(({ alignMarker = 'end', background = 'none', compact, heading, headingTag = 'h2', indent = false, onUpdate, open, size = 'small', sticky, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-accordion');
-    const propsToSync = [alignMarker, background, compact, heading, headingTag, open, size, sticky];
+    const propsToSync = [alignMarker, background, compact, heading, headingTag, indent, open, size, sticky];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['alignMarker', 'background', 'compact', 'heading', 'headingTag', 'open', 'size', 'sticky'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignMarker', 'background', 'compact', 'heading', 'headingTag', 'indent', 'open', 'size', 'sticky'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/ai-tag.wrapper.cjs

@@ -0,0 +1,26 @@
+"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 PAiTag = /*#__PURE__*/ react.forwardRef(({ locale = 'en_US', variant = 'generated', className, ...rest }, ref) => {
+    const elementRef = react.useRef(undefined);
+    const WebComponentTag = hooks.usePrefix('p-ai-tag');
+    const propsToSync = [locale, variant];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['locale', 'variant'].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.PAiTag = PAiTag;

package/cjs/public-api.cjs

@@ -3,6 +3,7 @@
 var componentsJs = require('@porsche-design-system/components-js');
 var hooks = require('./hooks.cjs');
 var accordion_wrapper = require('./lib/components/accordion.wrapper.cjs');
+var aiTag_wrapper = require('./lib/components/ai-tag.wrapper.cjs');
 var banner_wrapper = require('./lib/components/banner.wrapper.cjs');
 var button_wrapper = require('./lib/components/button.wrapper.cjs');
 var buttonPure_wrapper = require('./lib/components/button-pure.wrapper.cjs');
@@ -87,6 +88,7 @@ Object.defineProperty(exports, "componentsReady", {
 exports.skipCheckForPorscheDesignSystemProviderDuringTests = hooks.skipCheckForPorscheDesignSystemProviderDuringTests;
 exports.useToastManager = hooks.useToastManager;
 exports.PAccordion = accordion_wrapper.PAccordion;
+exports.PAiTag = aiTag_wrapper.PAiTag;
 exports.PBanner = banner_wrapper.PBanner;
 exports.PButton = button_wrapper.PButton;
 exports.PButtonPure = buttonPure_wrapper.PButtonPure;

package/esm/BaseProps.d.ts

@@ -1,2 +1,2 @@
 import type { DOMAttributes, HTMLAttributes } from 'react';
-export type BaseProps = Omit<DOMAttributes<{}>, 'onChange' | 'onInput' | 'onToggle'> & Pick<HTMLAttributes<{}>, 'suppressHydrationWarning' | 'autoFocus' | 'className' | 'dir' | 'hidden' | 'id' | 'inert' | 'lang' | 'slot' | 'style' | 'tabIndex' | 'title' | 'translate' | 'role'>;
+export type BaseProps = Omit<DOMAttributes<{}>, 'onChange' | 'onInput' | 'onToggle'> & Pick<HTMLAttributes<{}>, 'suppressHydrationWarning' | 'autoFocus' | 'className' | 'dir' | 'hidden' | 'id' | 'inert' | 'inputMode' | 'lang' | 'slot' | 'style' | 'tabIndex' | 'title' | 'translate' | 'role'>;

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { AccordionAlignMarker, AccordionBackground, AccordionHeadingTag, AccordionUpdateEventDetail, BreakpointCustomizable, AccordionSize } from '../types';
+import type { AccordionAlignMarker, AccordionBackground, AccordionHeadingTag, BreakpointCustomizable, AccordionUpdateEventDetail, AccordionSize } from '../types';
 export type PAccordionProps = BaseProps & {
     /**
      * Aligns the marker within the summary section.
@@ -24,6 +24,11 @@ export type PAccordionProps = BaseProps & {
      * @default 'h2'
      */
     headingTag?: AccordionHeadingTag;
+    /**
+     * Indents the slotted content to be vertically aligned with the text of the summary section.
+     * @default false
+     */
+    indent?: BreakpointCustomizable<boolean>;
     /**
      * Emitted when the accordion state changes.
      */
@@ -42,7 +47,7 @@ export type PAccordionProps = BaseProps & {
      */
     sticky?: boolean;
 };
-export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Aligns the marker within the summary section.
      * @default 'end'
@@ -66,6 +71,11 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
      * @default 'h2'
      */
     headingTag?: AccordionHeadingTag;
+    /**
+     * Indents the slotted content to be vertically aligned with the text of the summary section.
+     * @default false
+     */
+    indent?: BreakpointCustomizable<boolean>;
     /**
      * Emitted when the accordion state changes.
      */

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

@@ -4,14 +4,14 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PAccordion = /*#__PURE__*/ forwardRef(({ alignMarker = 'end', background = 'none', compact, heading, headingTag = 'h2', onUpdate, open, size = 'small', sticky, className, ...rest }, ref) => {
+const PAccordion = /*#__PURE__*/ forwardRef(({ alignMarker = 'end', background = 'none', compact, heading, headingTag = 'h2', indent = false, onUpdate, open, size = 'small', sticky, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-accordion');
-    const propsToSync = [alignMarker, background, compact, heading, headingTag, open, size, sticky];
+    const propsToSync = [alignMarker, background, compact, heading, headingTag, indent, open, size, sticky];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['alignMarker', 'background', 'compact', 'heading', 'headingTag', 'open', 'size', 'sticky'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignMarker', 'background', 'compact', 'heading', 'headingTag', 'indent', 'open', 'size', 'sticky'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/ai-tag.wrapper.d.ts

@@ -0,0 +1,26 @@
+import type { BaseProps } from '../../BaseProps';
+import type { AiTagLocale, AiTagVariant } from '../types';
+export type PAiTagProps = BaseProps & {
+    /**
+     * Locale for the AI text (ISO format, e.g. "de_DE").
+     * @default 'en_US'
+     */
+    locale?: AiTagLocale;
+    /**
+     * Variant to display: 'abbreviation' (e.g. "AI"), 'generated' (e.g. "AI-generated"), or 'modified' (e.g. "AI-modified").
+     * @default 'generated'
+     */
+    variant?: AiTagVariant;
+};
+export declare const PAiTag: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+    /**
+     * Locale for the AI text (ISO format, e.g. "de_DE").
+     * @default 'en_US'
+     */
+    locale?: AiTagLocale;
+    /**
+     * Variant to display: 'abbreviation' (e.g. "AI"), 'generated' (e.g. "AI-generated"), or 'modified' (e.g. "AI-modified").
+     * @default 'generated'
+     */
+    variant?: AiTagVariant;
+} & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/ai-tag.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 PAiTag = /*#__PURE__*/ forwardRef(({ locale = 'en_US', variant = 'generated', className, ...rest }, ref) => {
+    const elementRef = useRef(undefined);
+    const WebComponentTag = usePrefix('p-ai-tag');
+    const propsToSync = [locale, variant];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['locale', 'variant'].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 { PAiTag };

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

@@ -41,7 +41,7 @@ export type PBannerProps = BaseProps & {
      */
     state?: BannerState;
 };
-export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Sets the description text of the banner.
      * @default ''

package/esm/lib/components/button-pure.wrapper.d.ts

@@ -77,7 +77,7 @@ export type PButtonPureProps = BaseProps & {
      */
     value?: string;
 };
-export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Displays the button in its active state.
      * @default false

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

@@ -68,7 +68,7 @@ export type PButtonTileProps = BaseProps & {
      */
     weight?: BreakpointCustomizable<ButtonTileWeight>;
 };
-export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Alignment of button and description.
      * @default 'bottom'

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

@@ -57,7 +57,7 @@ export type PButtonProps = BaseProps & {
      */
     variant?: ButtonVariant;
 };
-export declare const PButton: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PButton: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Sets ARIA attributes.
      */

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

@@ -25,7 +25,7 @@ export type PCanvasProps = BaseProps & {
      */
     sidebarStartOpen?: boolean;
 };
-export declare const PCanvas: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PCanvas: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines the background color of the main section and auto adjust it for the sidebar
      * @default 'canvas'

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

@@ -81,7 +81,7 @@ export type PCarouselProps = BaseProps & {
      */
     width?: CarouselWidth;
 };
-export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines which slide is active (zero-based numbering).
      * @default 0

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

@@ -74,7 +74,7 @@ export type PCheckboxProps = BaseProps & {
      */
     value?: string;
 };
-export declare const PCheckbox: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PCheckbox: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Reflects the checkbox current checked state and allows setting the initial checked state.
      * @default false

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

@@ -15,7 +15,7 @@ export type PCrestProps = BaseProps & {
      */
     target?: CrestTarget;
 };
-export declare const PCrest: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PCrest: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Sets ARIA attributes.
      */

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

@@ -27,7 +27,7 @@ export type PDisplayProps = BaseProps & {
     tag?: DisplayTag;
 };
 /** @deprecated since v4.0.0, will be removed with next major release. Please use `p-heading` instead. */
-export declare const PDisplay: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PDisplay: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Text alignment of the component.
      * @default 'start'

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

@@ -12,7 +12,7 @@ export type PDividerProps = BaseProps & {
      */
     direction?: BreakpointCustomizable<DividerDirection>;
 };
-export declare const PDivider: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PDivider: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines color.
      * @default 'contrast-lower'

package/esm/lib/components/drilldown-item.wrapper.d.ts

@@ -24,7 +24,7 @@ export type PDrilldownItemProps = BaseProps & {
      */
     secondary?: boolean;
 };
-export declare const PDrilldownItem: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PDrilldownItem: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Private property set by the component itself.
      * @default false

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

@@ -28,7 +28,7 @@ export type PDrilldownLinkProps = BaseProps & {
      */
     target?: DrilldownLinkTarget;
 };
-export declare const PDrilldownLink: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PDrilldownLink: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Displays the link in its active state.
      * @default false

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

@@ -23,7 +23,7 @@ export type PDrilldownProps = BaseProps & {
      */
     open?: boolean;
 };
-export declare const PDrilldown: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PDrilldown: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines which `p-drilldown-item` is shown as open.
      */

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

@@ -31,7 +31,7 @@ export type PFieldsetProps = BaseProps & {
      */
     state?: FieldsetState;
 };
-export declare const PFieldset: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PFieldset: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Sets ARIA attributes.
      */

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

@@ -16,7 +16,7 @@ export type PFlagProps = BaseProps & {
      */
     size?: BreakpointCustomizable<FlagSize>;
 };
-export declare const PFlag: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PFlag: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * A map of ARIA attributes to enhance the flag's accessibility. For example, use `{ 'aria-label': 'German flag' }` to provide a descriptive label for screen readers.
      */

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

@@ -48,7 +48,7 @@ export type PFlyoutProps = BaseProps & {
      */
     position?: FlyoutPosition;
 };
-export declare const PFlyout: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PFlyout: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Sets ARIA attributes.
      */

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

@@ -36,7 +36,7 @@ export type PHeadingProps = BaseProps & {
      */
     weight?: HeadingWeight;
 };
-export declare const PHeading: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PHeading: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Text alignment of the heading. Use 'start' for left-aligned text (in LTR), 'center' for centered, 'end' for right-aligned (in LTR), or 'inherit' to adopt the parent's alignment.
      * @default 'start'

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

@@ -25,7 +25,7 @@ export type PIconProps = BaseProps & {
      */
     source?: string;
 };
-export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Sets ARIA attributes.
      */

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

@@ -1,4 +1,5 @@
 export * from './accordion.wrapper';
+export * from './ai-tag.wrapper';
 export * from './banner.wrapper';
 export * from './button.wrapper';
 export * from './button-pure.wrapper';

package/esm/lib/components/inline-notification.wrapper.d.ts

@@ -49,7 +49,7 @@ export type PInlineNotificationProps = BaseProps & {
      */
     state?: InlineNotificationState;
 };
-export declare const PInlineNotification: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PInlineNotification: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Action icon of the inline-notification.
      * @default 'arrow-right'

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

@@ -92,9 +92,9 @@ export type PInputDateProps = BaseProps & {
      * The default date value for the input, in YYYY-MM-DD format (e.g., value='2025-07-02').
      * @default ''
      */
-    value?: string;
+    value?: string | null;
 };
-export declare const PInputDate: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PInputDate: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "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='bday' for a birthday).
      */
@@ -186,7 +186,7 @@ export declare const PInputDate: import("react").ForwardRefExoticComponent<Omit<
      * The default date value for the input, in YYYY-MM-DD format (e.g., value='2025-07-02').
      * @default ''
      */
-    value?: string;
+    value?: string | null;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -106,9 +106,9 @@ export type PInputEmailProps = BaseProps & {
      * The default email address (or comma-separated list of addresses) for the input.
      * @default ''
      */
-    value?: string;
+    value?: string | null;
 };
-export declare const PInputEmail: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PInputEmail: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "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').
      */
@@ -214,7 +214,7 @@ export declare const PInputEmail: import("react").ForwardRefExoticComponent<Omit
      * The default email address (or comma-separated list of addresses) for the input.
      * @default ''
      */
-    value?: string;
+    value?: string | null;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -92,9 +92,9 @@ export type PInputMonthProps = BaseProps & {
      * The default month value for the input, in YYYY-MM format (e.g., value='2025-07').
      * @default ''
      */
-    value?: string;
+    value?: string | null;
 };
-export declare const PInputMonth: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PInputMonth: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "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.
      */
@@ -186,7 +186,7 @@ export declare const PInputMonth: import("react").ForwardRefExoticComponent<Omit
      * The default month value for the input, in YYYY-MM format (e.g., value='2025-07').
      * @default ''
      */
-    value?: string;
+    value?: string | null;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;