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

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/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

@@ -502,6 +502,7 @@ declare const ICON_NAMES: readonly [
 ];
 export type IconName = typeof ICON_NAMES[number];
 declare const FLAG_NAMES: readonly [
+    "ad",
     "ae",
     "am",
     "ar",
@@ -538,6 +539,7 @@ declare const FLAG_NAMES: readonly [
     "gb",
     "ge",
     "gh",
+    "gi",
     "gr",
     "gt",
     "hk",
@@ -560,12 +562,15 @@ declare const FLAG_NAMES: readonly [
     "kw",
     "kz",
     "lb",
+    "li",
     "lk",
     "lt",
     "lu",
     "lv",
     "ma",
+    "mc",
     "md",
+    "me",
     "mk",
     "mn",
     "mo",
@@ -602,12 +607,14 @@ declare const FLAG_NAMES: readonly [
     "tn",
     "tr",
     "tt",
+    "tw",
     "ua",
     "us",
     "uy",
     "uz",
     "ve",
     "vn",
+    "xx",
     "za"
 ];
 export type FlagName = typeof FLAG_NAMES[number];
@@ -726,13 +733,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",
@@ -1111,6 +1122,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",
@@ -1129,6 +1145,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",
@@ -1409,11 +1426,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"
@@ -1474,7 +1486,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",
@@ -1488,6 +1502,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"
@@ -1497,7 +1514,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%);