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

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

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "header", "description": "Renders a header section above the content area." }
  * @slot {"name": "", "description": "Default slot for the main content." }

package/ssr/esm/lib/dsr-components/model-signature.d.ts

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for an img or video tag when using the model-signature as a mask." }
  */

package/ssr/esm/lib/dsr-components/multi-select-option.d.ts

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 import type { MultiSelectOptionInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
 /**
  * @slot {"name": "", "description": "Default slot for the option text." }

package/ssr/esm/lib/dsr-components/multi-select.d.ts

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } 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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}

package/ssr/esm/lib/dsr-components/notification-base.d.ts

@@ -0,0 +1,14 @@
+import type { FC } from 'react';
+import type { JSX } from 'react';
+type NotificationBaseProps = {
+    heading?: string;
+    headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    hasHeadingSlot?: boolean;
+    description?: string;
+    hasDescriptionSlot?: boolean;
+    innerHTML?: boolean;
+    actionLabel?: JSX.Element;
+    dismissButton?: JSX.Element;
+};
+export declare const NotificationBase: FC<NotificationBaseProps>;
+export {};

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

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the optgroup content." }
  */

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

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @controlled { "props": ["activePage"], "event": "update", "isInternallyMutated": true }
  */

package/ssr/esm/lib/dsr-components/pin-code.d.ts

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } 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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}

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

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the popover content." }
  * @slot {"name": "button", "description": "Slot for custom button." }

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

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 import type { RadioGroupOptionInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
 /**
  * @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."}

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

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } 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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}

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

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the scroller content." }
  */

package/ssr/esm/lib/dsr-components/segmented-control-item.d.ts

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 import { type SegmentedControlItemInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
 /**
  * @slot {"name": "", "description": "Default slot for the content." }

package/ssr/esm/lib/dsr-components/segmented-control.d.ts

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } 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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}

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

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 import { type SelectOptionInternalHTMLProps } from '@porsche-design-system/components/dist/utils';
 /**
  * @slot {"name": "", "description": "Default slot for the option content." }

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

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } 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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}

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

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "header", "description": "Renders a header section above the content area." }
  * @slot {"name": "", "description": "Default slot for the main content." }

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

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 export declare class DSRSpinner extends Component<any> {
     host: HTMLElement;
     render(): JSX.Element;

package/ssr/esm/lib/dsr-components/stepper-horizontal-item.d.ts

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the content." }
  */

package/ssr/esm/lib/dsr-components/stepper-horizontal.d.ts

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the `p-stepper-horizontal-item` tags." }
  */

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

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the label." }
  *

package/ssr/esm/lib/dsr-components/table-body.d.ts

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the table body content." }
  */

package/ssr/esm/lib/dsr-components/table-cell.d.ts

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the table cell content." }
  */

package/ssr/esm/lib/dsr-components/table-head-cell.d.ts

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the table head cell content." }
  */

package/ssr/esm/lib/dsr-components/table-head-row.d.ts

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the table head row content." }
  */

package/ssr/esm/lib/dsr-components/table-head.d.ts

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the table head content." }
  */

package/ssr/esm/lib/dsr-components/table-row.d.ts

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the table row content." }
  */

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

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "caption", "description": "Shows a caption that describes the content of the table." }
  * @slot {"name": "", "description": "Default slot for the table content." }

package/ssr/esm/lib/dsr-components/tabs-bar.d.ts

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the `button` or `a` tags which will be rendered as tabs." }
  *

package/ssr/esm/lib/dsr-components/tabs-item.d.ts

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the tab content." }
  */

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

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the `p-tabs-item` tags." }
  *

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

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the tag content." }
  */

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

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the tag content." }
  */

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

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the content." }
  */

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

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the `p-text-list-item` tags or nested `p-text-list` tags." }
  */

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

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the text to render." }
  */

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

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } 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": "label-after", "description": "Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`)."}

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

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 export declare class DSRToast extends Component<any> {
     host: HTMLElement;
     private toastItemElement;

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

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import type { JSX } from 'react';
 export declare class DSRWordmark extends Component<any> {
     host: HTMLElement;
     render(): JSX.Element;

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

@@ -701,30 +701,6 @@ declare const LINK_TARGETS: readonly [
     "_top"
 ];
 export type LinkTarget = (typeof LINK_TARGETS)[number] | string;
-export type MultiSelectState = FormState;
-export type MultiSelectDropdownDirection = SelectComponentsDropdownDirection;
-export type MultiSelectChangeEventDetail = {
-    name: string;
-    value: string[];
-};
-export type MultiSelectToggleEventDetail = {
-    open: boolean;
-};
-export type SelectState = FormState;
-export type SelectDropdownDirection = SelectComponentsDropdownDirection;
-export type SelectChangeEventDetail = {
-    name: string;
-    value: string;
-};
-export type SelectToggleEventDetail = {
-    open: boolean;
-};
-declare const SELECT_DROPDOWN_DIRECTIONS: readonly [
-    "down",
-    "up",
-    "auto"
-];
-export type SelectComponentsDropdownDirection = (typeof SELECT_DROPDOWN_DIRECTIONS)[number];
 declare const TILE_ASPECT_RATIOS: readonly [
     "1/1",
     "4/3",
@@ -750,6 +726,30 @@ declare const TILE_ALIGNS: readonly [
     "bottom"
 ];
 export type TileAlign = (typeof TILE_ALIGNS)[number];
+export type MultiSelectState = FormState;
+export type MultiSelectDropdownDirection = SelectComponentsDropdownDirection;
+export type MultiSelectChangeEventDetail = {
+    name: string;
+    value: string[];
+};
+export type MultiSelectToggleEventDetail = {
+    open: boolean;
+};
+export type SelectState = FormState;
+export type SelectDropdownDirection = SelectComponentsDropdownDirection;
+export type SelectChangeEventDetail = {
+    name: string;
+    value: string;
+};
+export type SelectToggleEventDetail = {
+    open: boolean;
+};
+declare const SELECT_DROPDOWN_DIRECTIONS: readonly [
+    "down",
+    "up",
+    "auto"
+];
+export type SelectComponentsDropdownDirection = (typeof SELECT_DROPDOWN_DIRECTIONS)[number];
 declare const ALIGN_LABELS: readonly [
     "start",
     "end"
@@ -784,6 +784,11 @@ export type SelectedAriaAttributes<T extends keyof AriaAttributes> = Pick<AriaAt
 export type SelectedAriaRole<T> = {
     role: Extract<AriaRole, T>;
 };
+declare const BANNER_POSITIONS: readonly [
+    "top",
+    "bottom"
+];
+export type BannerPosition = (typeof BANNER_POSITIONS)[number];
 declare const BANNER_STATES: readonly [
     "info",
     "success",
@@ -1484,9 +1489,13 @@ declare const TAG_VARIANTS: readonly [
     "primary",
     "secondary",
     "info",
+    "info-frosted",
     "warning",
+    "warning-frosted",
     "success",
-    "error"
+    "success-frosted",
+    "error",
+    "error-frosted"
 ];
 export type TagVariant = (typeof TAG_VARIANTS)[number];
 declare const TAG_DISMISSIBLE_ARIA_ATTRIBUTES: readonly [