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

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

@@ -726,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",
@@ -1111,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",
@@ -1129,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",
@@ -1409,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"
@@ -1474,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",
@@ -1488,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"
@@ -1497,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%);