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

package/ssr/esm/lib/components/tag-dismissible.wrapper.d.ts

@@ -18,7 +18,7 @@ export type PTagDismissibleProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PTagDismissible: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTagDismissible: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

package/ssr/esm/lib/components/tag.wrapper.d.ts

@@ -22,7 +22,7 @@ export type PTagProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PTag: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTag: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Background color variations depending on theme property.
      */

package/ssr/esm/lib/components/text-field-wrapper.wrapper.d.ts

@@ -63,7 +63,7 @@ export type PTextFieldWrapperProps = BaseProps & {
     unitPosition?: TextFieldWrapperUnitPosition;
 };
 /** @deprecated since v3.29.0, will be removed with next major release. Please use one of the specific input components instead: `p-input-date`, `p-input-email`, `p-input-number`, `p-input-password`, `p-input-search`, `p-input-tel`, `p-input-text`, `p-input-time` or `p-input-url`. */
-export declare const PTextFieldWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTextFieldWrapper: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Action icon can be set to `locate` for `input type="search"` in order to display an action button.
      */

package/ssr/esm/lib/components/text-list-item.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
 export type PTextListItemProps = BaseProps & {};
-export declare const PTextListItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTextListItem: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/text-list.wrapper.d.ts

@@ -18,7 +18,7 @@ export type PTextListProps = BaseProps & {
      */
     type?: TextListType;
 };
-export declare const PTextList: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTextList: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `type` instead. The type of the list.
      */

package/ssr/esm/lib/components/text.wrapper.d.ts

@@ -30,7 +30,7 @@ export type PTextProps = BaseProps & {
      */
     weight?: TextWeight;
 };
-export declare const PText: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PText: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Text alignment of the component.
      */

package/ssr/esm/lib/components/textarea-wrapper.wrapper.d.ts

@@ -35,7 +35,7 @@ export type PTextareaWrapperProps = BaseProps & {
     theme?: Theme;
 };
 /** @deprecated since v3.29.0, will be removed with next major release. Please use `p-textarea` instead. */
-export declare const PTextareaWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTextareaWrapper: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The description text.
      */

package/ssr/esm/lib/components/textarea.wrapper.d.ts

@@ -98,7 +98,7 @@ export type PTextareaProps = BaseProps & {
      */
     wrap?: TextareaWrap;
 };
-export declare const PTextarea: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTextarea: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange"> & 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='on').
      */

package/ssr/esm/lib/components/toast.wrapper.d.ts

@@ -6,7 +6,7 @@ export type PToastProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PToast: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PToast: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Adapts the toast color depending on the theme.
      */

package/ssr/esm/lib/components/wordmark.wrapper.d.ts

@@ -22,7 +22,7 @@ export type PWordmarkProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PWordmark: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PWordmark: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

package/ssr/esm/lib/dsr-components/button-tile.d.ts

@@ -2,8 +2,10 @@ import { Component } from 'react';
 /**
  * @slot {"name": "header", "description": "Renders a header section above the content area." }
  * @slot {"name": "", "description": "Default slot for the img or picture tag." }
+ * @slot {"name": "footer", "description": "Renders a footer section below the description." }
  */
 export declare class DSRButtonTile extends Component<any> {
     host: HTMLElement;
+    private hasFooterSlot;
     render(): JSX.Element;
 }

package/ssr/esm/lib/dsr-components/checkbox.d.ts

@@ -5,6 +5,10 @@ import { Component } from 'react';
  */
 export declare class DSRCheckbox extends Component<any> {
     host: HTMLElement;
+    /**
+     * Emitted when checkbox checked property is changed.
+     * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead.
+     */
     private internals;
     private initialLoading;
     private defaultChecked;

package/ssr/esm/lib/dsr-components/label.d.ts

@@ -9,6 +9,11 @@ type LabelProps = {
     description?: string;
     isLoading?: boolean;
     isDisabled?: boolean;
+    /**
+     * If true, clicking the label will not bubble to the host element,
+     * preventing duplicate handling on host click listeners.
+     */
+    stopClickPropagation?: boolean;
 };
 export declare const Label: FC<LabelProps>;
 export {};

package/ssr/esm/lib/dsr-components/link-tile.d.ts

@@ -2,8 +2,10 @@ import { Component } from 'react';
 /**
  * @slot {"name": "header", "description": "Renders a header section above the content area." }
  * @slot {"name": "", "description": "Default slot for the img or picture tag." }
+ * @slot {"name": "footer", "description": "Renders a footer section below the description." }
  */
 export declare class DSRLinkTile extends Component<any> {
     host: HTMLElement;
+    private hasFooterSlot;
     render(): JSX.Element;
 }

package/ssr/esm/lib/dsr-components/radio-button-wrapper.d.ts

@@ -3,6 +3,8 @@ import { Component } from 'react';
  * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
  * @slot {"name": "", "description": "Default slot for the input." }
  * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
+ *
+ * @deprecated since v3.30.0, will be removed with next major release. Please use `p-radio-group` instead.
  */
 export declare class DSRRadioButtonWrapper extends Component<any> {
     host: HTMLElement;

package/ssr/esm/lib/dsr-components/radio-group-option.d.ts

@@ -0,0 +1,8 @@
+import { Component } from 'react';
+import type { RadioGroupOptionInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
+export declare class DSRRadioGroupOption extends Component<any> {
+    host: HTMLElement & RadioGroupOptionInternalHTMLProps;
+    private initialLoading;
+    private inputElement;
+    render(): JSX.Element;
+}

package/ssr/esm/lib/dsr-components/radio-group.d.ts

@@ -0,0 +1,19 @@
+import { Component } from 'react';
+/**
+ * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "description", "description": "Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ * @slot {"name": "", "description": "Default slot for the p-radio-group-option tags." }
+ * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed."}
+ */
+export declare class DSRRadioGroup extends Component<any> {
+    host: HTMLElement;
+    private internals;
+    private initialLoading;
+    private defaultValue;
+    private radioGroupOptions;
+    private preventOptionUpdate;
+    formResetCallback(): void;
+    formDisabledCallback(): void;
+    formStateRestoreCallback(): void;
+    render(): JSX.Element;
+}

package/ssr/esm/lib/types.d.ts

@@ -221,8 +221,16 @@ declare const ICON_NAMES: readonly [
     "add",
     "adjust",
     "aggregation",
+    "ai-3d-object",
+    "ai-code",
+    "ai-edit",
+    "ai-image",
+    "ai-scale",
+    "ai-sound",
     "ai-spark",
     "ai-spark-filled",
+    "ai-text",
+    "ai-video",
     "arrow-compact-down",
     "arrow-compact-left",
     "arrow-compact-right",
@@ -611,6 +619,7 @@ declare const FORM_STATES: readonly [
 export type FormState = (typeof FORM_STATES)[number];
 declare const BUTTON_ARIA_ATTRIBUTES: readonly [
     "aria-label",
+    "aria-description",
     "aria-expanded",
     "aria-pressed",
     "aria-haspopup"
@@ -618,6 +627,7 @@ declare const BUTTON_ARIA_ATTRIBUTES: readonly [
 export type ButtonAriaAttribute = (typeof BUTTON_ARIA_ATTRIBUTES)[number];
 declare const LINK_ARIA_ATTRIBUTES: readonly [
     "aria-label",
+    "aria-description",
     "aria-current",
     "aria-haspopup"
 ];
@@ -716,13 +726,17 @@ export type MultiSelectUpdateEvent = {
     name: string;
     value: string[];
 };
+/** @deprecated */
 export type MultiSelectUpdateEventDetail = MultiSelectUpdateEvent;
+export type MultiSelectChangeEventDetail = MultiSelectUpdateEventDetail;
 export type SelectState = FormState;
 export type SelectDropdownDirection = SelectComponentsDropdownDirection;
+/** @deprecated */
 export type SelectUpdateEventDetail = {
     name: string;
     value: string;
 };
+export type SelectChangeEventDetail = SelectUpdateEventDetail;
 declare const SELECT_DROPDOWN_DIRECTIONS: readonly [
     "down",
     "up",
@@ -936,6 +950,7 @@ export type CheckboxUpdateEventDetail = {
     checked: boolean;
 };
 export type CheckboxBlurEventDetail = Event;
+export type CheckboxChangeEventDetail = Event;
 export type CheckboxWrapperState = FormState;
 declare const CONTENT_WRAPPER_BACKGROUND_COLORS: readonly [
     "transparent",
@@ -1100,6 +1115,11 @@ declare const FLEX_ITEM_FLEXS: readonly [
     "equal"
 ];
 export type FlexItemFlex = (typeof FLEX_ITEM_FLEXS)[number];
+declare const BACKDROPS: readonly [
+    "blur",
+    "shading"
+];
+export type Backdrop = (typeof BACKDROPS)[number];
 declare const FLYOUT_POSITIONS: readonly [
     "start",
     "end",
@@ -1118,6 +1138,7 @@ declare const FLYOUT_ARIA_ATTRIBUTES: readonly [
 export type FlyoutAriaAttribute = (typeof FLYOUT_ARIA_ATTRIBUTES)[number];
 export type FlyoutMotionVisibleEndEventDetail = TransitionEvent;
 export type FlyoutMotionHiddenEndEventDetail = TransitionEvent;
+export type FlyoutBackdrop = Backdrop;
 declare const GRID_DIRECTIONS: readonly [
     "row",
     "row-reverse",
@@ -1286,6 +1307,9 @@ declare const LINK_TILE_MODEL_SIGNATURE_MODELS: readonly [
     "boxster",
     "cayenne",
     "cayman",
+    "gt3-rs",
+    "gt3",
+    "gts",
     "macan",
     "panamera",
     "taycan",
@@ -1341,6 +1365,21 @@ declare const MODEL_SIGNATURES_MANIFEST: {
         width: number;
         height: number;
     };
+    "gt3-rs": {
+        src: string;
+        width: number;
+        height: number;
+    };
+    gt3: {
+        src: string;
+        width: number;
+        height: number;
+    };
+    gts: {
+        src: string;
+        width: number;
+        height: number;
+    };
     macan: {
         src: string;
         width: number;
@@ -1380,11 +1419,6 @@ declare const MARQUE_SIZES: readonly [
     "medium"
 ];
 export type MarqueSize = (typeof MARQUE_SIZES)[number];
-declare const BACKDROPS: readonly [
-    "blur",
-    "shading"
-];
-export type Backdrop = (typeof BACKDROPS)[number];
 declare const MODAL_ARIA_ATTRIBUTES: readonly [
     "aria-label",
     "role"
@@ -1445,7 +1479,9 @@ export type PinCodeUpdateEvent = {
     value: string;
     isComplete: boolean;
 };
+/** @deprecated */
 export type PinCodeUpdateEventDetail = PinCodeUpdateEvent;
+export type PinCodeChangeEventDetail = PinCodeUpdateEventDetail;
 export type PinCodeState = FormState;
 declare const POPOVER_DIRECTIONS: readonly [
     "top",
@@ -1459,6 +1495,9 @@ declare const POPOVER_ARIA_ATTRIBUTES: readonly [
 ];
 export type PopoverAriaAttribute = (typeof POPOVER_ARIA_ATTRIBUTES)[number];
 export type RadioButtonWrapperState = FormState;
+export type RadioGroupState = FormState;
+export type RadioGroupDirection = GroupDirection;
+export type RadioGroupChangeEventDetail = Event;
 declare const SEGMENTED_CONTROL_BACKGROUND_COLORS: readonly [
     "background-surface",
     "background-default"
@@ -1468,7 +1507,9 @@ export type SegmentedControlBackgroundColor = (typeof SEGMENTED_CONTROL_BACKGROU
 export type SegmentedControlUpdateEvent = {
     value: string | number;
 };
+/** @deprecated */
 export type SegmentedControlUpdateEventDetail = SegmentedControlUpdateEvent;
+export type SegmentedControlChangeEventDetail = SegmentedControlUpdateEventDetail;
 declare const SEGMENTED_CONTROL_COLUMNS: (string | number)[];
 export type SegmentedControlColumns = (typeof SEGMENTED_CONTROL_COLUMNS)[number];
 export type SegmentedControlItemIcon = LinkButtonIconName;

package/tailwindcss/index.css

@@ -3,7 +3,7 @@
 @theme {
   /* Color */
   --color-primary: #010205;
-  --color-base: #FFF;
+  --color-canvas: #FFF;
   --color-surface: #EEEFF2;
   --color-shading: rgba(1,2,5,.67);
   --color-frosted: hsl(240 4% 85%/35%);
@@ -25,7 +25,7 @@
   --color-skeleton: #f7f7f7;
 
   --color-primary-light: #010205;
-  --color-base-light: #FFF;
+  --color-canvas-light: #FFF;
   --color-surface-light: #EEEFF2;
   --color-shading-light: rgba(1,2,5,.67);
   --color-frosted-light: hsl(240 4% 85%/35%);
@@ -47,7 +47,7 @@
   --color-skeleton-light: #f7f7f7;
 
   --color-primary-dark: #FBFCFF;
-  --color-base-dark: #0E0E12;
+  --color-canvas-dark: #0E0E12;
   --color-surface-dark: #212225;
   --color-shading-dark: rgba(38,38,41,.67);
   --color-frosted-dark: hsl(240 3% 26%/35%);
@@ -167,7 +167,7 @@
 @layer theme {
   .light {
     --color-primary: #010205;
-    --color-base: #FFF;
+    --color-canvas: #FFF;
     --color-surface: #EEEFF2;
     --color-shading: rgba(1,2,5,.67);
     --color-frosted: hsl(240 4% 85%/35%);
@@ -191,7 +191,7 @@
 
   .dark {
     --color-primary: #FBFCFF;
-    --color-base: #0E0E12;
+    --color-canvas: #0E0E12;
     --color-surface: #212225;
     --color-shading: rgba(38,38,41,.67);
     --color-frosted: hsl(240 3% 26%/35%);
@@ -216,7 +216,7 @@
   .auto {
     @media (prefers-color-scheme: dark) {
       --color-primary: #FBFCFF;
-      --color-base: #0E0E12;
+      --color-canvas: #0E0E12;
       --color-surface: #212225;
       --color-shading: rgba(38,38,41,.67);
       --color-frosted: hsl(240 3% 26%/35%);