@porsche-design-system/components-react 4.0.0-beta.1 → 4.0.0-beta.3

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

@@ -2,11 +2,11 @@ import type { BaseProps } from '../../BaseProps';
 import type { TableHeadCellSort } from '../types';
 export type PTableHeadCellProps = BaseProps & {
     /**
-     * Hides the label but stays accessible for screen readers. This property only takes effect when sort property is not defined.
+     * Hides the label but keeps it accessible for screen readers. This property only takes effect when the `sort` prop is not set.
      */
     hideLabel?: boolean;
     /**
-     * Displays slotted text multiline or forced into a single line.
+     * Allows slotted text to wrap onto multiple lines instead of being forced onto a single line.
      */
     multiline?: boolean;
     /**
@@ -16,11 +16,11 @@ export type PTableHeadCellProps = BaseProps & {
 };
 export declare const PTableHeadCell: 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"> & {
     /**
-     * Hides the label but stays accessible for screen readers. This property only takes effect when sort property is not defined.
+     * Hides the label but keeps it accessible for screen readers. This property only takes effect when the `sort` prop is not set.
      */
     hideLabel?: boolean;
     /**
-     * Displays slotted text multiline or forced into a single line.
+     * Allows slotted text to wrap onto multiple lines instead of being forced onto a single line.
      */
     multiline?: boolean;
     /**

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

@@ -6,7 +6,7 @@ export type PTableProps = BaseProps & {
      */
     caption?: string;
     /**
-     * Displays as compact version.
+     * Displays with reduced spacing and smaller padding for a more condensed layout.
      */
     compact?: boolean;
     /**
@@ -17,6 +17,10 @@ export type PTableProps = BaseProps & {
      * Emitted when sorting is changed.
      */
     onUpdate?: (event: CustomEvent<TableUpdateEventDetail>) => void;
+    /**
+     * @experimental Makes the scroll indicator sticky at the top or bottom while scrolling depending on the scroll direction.
+     */
+    sticky?: boolean;
 };
 export declare const PTable: 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"> & {
     /**
@@ -24,7 +28,7 @@ export declare const PTable: import("react").ForwardRefExoticComponent<Omit<impo
      */
     caption?: string;
     /**
-     * Displays as compact version.
+     * Displays with reduced spacing and smaller padding for a more condensed layout.
      */
     compact?: boolean;
     /**
@@ -35,6 +39,10 @@ export declare const PTable: import("react").ForwardRefExoticComponent<Omit<impo
      * Emitted when sorting is changed.
      */
     onUpdate?: (event: CustomEvent<TableUpdateEventDetail>) => void;
+    /**
+     * @experimental Makes the scroll indicator sticky at the top or bottom while scrolling depending on the scroll direction.
+     */
+    sticky?: boolean;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,10 +1,18 @@
 import type { BaseProps } from '../../BaseProps';
-import type { TabsBarUpdateEventDetail, BreakpointCustomizable, TabsBarSize, TabsBarWeight } from '../types';
+import type { TabsBarBackground, TabsBarUpdateEventDetail, BreakpointCustomizable, TabsBarSize, TabsBarWeight } from '../types';
 export type PTabsBarProps = BaseProps & {
     /**
-     * Defines which tab to be visualized as selected (zero-based numbering), undefined if none should be selected.
+     * Defines which tab is shown as selected (zero-based numbering), or `undefined` if none should be selected.
      */
     activeTabIndex?: number | undefined;
+    /**
+     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     */
+    background?: TabsBarBackground;
+    /**
+     * Displays with reduced spacing and smaller padding for a more condensed layout.
+     */
+    compact?: boolean;
     /**
      * Emitted when active tab is changed.
      */
@@ -14,15 +22,23 @@ export type PTabsBarProps = BaseProps & {
      */
     size?: BreakpointCustomizable<TabsBarSize>;
     /**
-     * The text weight.
+     * @deprecated Will be removed in the next major release. Has no effect anymore.
      */
     weight?: TabsBarWeight;
 };
 export declare const PTabsBar: 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"> & {
     /**
-     * Defines which tab to be visualized as selected (zero-based numbering), undefined if none should be selected.
+     * Defines which tab is shown as selected (zero-based numbering), or `undefined` if none should be selected.
      */
     activeTabIndex?: number | undefined;
+    /**
+     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     */
+    background?: TabsBarBackground;
+    /**
+     * Displays with reduced spacing and smaller padding for a more condensed layout.
+     */
+    compact?: boolean;
     /**
      * Emitted when active tab is changed.
      */
@@ -32,7 +48,7 @@ export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<im
      */
     size?: BreakpointCustomizable<TabsBarSize>;
     /**
-     * The text weight.
+     * @deprecated Will be removed in the next major release. Has no effect anymore.
      */
     weight?: TabsBarWeight;
 } & {

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

@@ -1,10 +1,18 @@
 import type { BaseProps } from '../../BaseProps';
-import type { TabsUpdateEventDetail, BreakpointCustomizable, TabsSize, TabsWeight } from '../types';
+import type { TabsBackground, TabsUpdateEventDetail, BreakpointCustomizable, TabsSize, TabsWeight } from '../types';
 export type PTabsProps = BaseProps & {
     /**
-     * Defines which tab to be visualized as selected (zero-based numbering).
+     * Defines which tab is shown as selected (zero-based numbering).
      */
     activeTabIndex?: number;
+    /**
+     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     */
+    background?: TabsBackground;
+    /**
+     * Displays with reduced spacing and smaller padding for a more condensed layout.
+     */
+    compact?: boolean;
     /**
      * Emitted when active tab is changed.
      */
@@ -14,15 +22,23 @@ export type PTabsProps = BaseProps & {
      */
     size?: BreakpointCustomizable<TabsSize>;
     /**
-     * The text weight.
+     * @deprecated Will be removed in the next major release. Has no effect anymore.
      */
     weight?: TabsWeight;
 };
 export declare const PTabs: 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"> & {
     /**
-     * Defines which tab to be visualized as selected (zero-based numbering).
+     * Defines which tab is shown as selected (zero-based numbering).
      */
     activeTabIndex?: number;
+    /**
+     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     */
+    background?: TabsBackground;
+    /**
+     * Displays with reduced spacing and smaller padding for a more condensed layout.
+     */
+    compact?: boolean;
     /**
      * Emitted when active tab is changed.
      */
@@ -32,7 +48,7 @@ export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<impor
      */
     size?: BreakpointCustomizable<TabsSize>;
     /**
-     * The text weight.
+     * @deprecated Will be removed in the next major release. Has no effect anymore.
      */
     weight?: TabsWeight;
 } & {

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

@@ -2,29 +2,29 @@ import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, TagDismissibleAriaAttribute } from '../types';
 export type PTagDismissibleProps = BaseProps & {
     /**
-     * Add ARIA attributes.
+     * Sets ARIA attributes.
      */
     aria?: SelectedAriaAttributes<TagDismissibleAriaAttribute>;
     /**
-     * A boolean value that, if present, renders the tag dismissible as a compact version.
+     * Displays the dismissible tag in compact mode.
      */
     compact?: boolean;
     /**
-     * The label text.
+     * Text content for a user-facing label.
      */
     label?: string;
 };
 export declare const PTagDismissible: 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"> & {
     /**
-     * Add ARIA attributes.
+     * Sets ARIA attributes.
      */
     aria?: SelectedAriaAttributes<TagDismissibleAriaAttribute>;
     /**
-     * A boolean value that, if present, renders the tag dismissible as a compact version.
+     * Displays the dismissible tag in compact mode.
      */
     compact?: boolean;
     /**
-     * The label text.
+     * Text content for a user-facing label.
      */
     label?: string;
 } & {

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

@@ -2,7 +2,7 @@ import type { BaseProps } from '../../BaseProps';
 import type { TagIcon, TagVariant } from '../types';
 export type PTagProps = BaseProps & {
     /**
-     * Displays as compact version.
+     * Displays the tag in compact mode.
      */
     compact?: boolean;
     /**
@@ -20,7 +20,7 @@ export type PTagProps = BaseProps & {
 };
 export declare const PTag: 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"> & {
     /**
-     * Displays as compact version.
+     * Displays the tag in compact mode.
      */
     compact?: boolean;
     /**

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

@@ -2,53 +2,53 @@ import type { BaseProps } from '../../BaseProps';
 import type { TextAlign, TextColor, BreakpointCustomizable, TextSize, TextTag, TextWeight } from '../types';
 export type PTextProps = BaseProps & {
     /**
-     * Text alignment of the component.
+     * Text alignment of the text.
      */
     align?: TextAlign;
     /**
-     * Basic text color variations.
+     * Text color of the text. Use 'primary' for default, 'contrast-high' / 'contrast-medium' for alternative emphasis, 'success' / 'warning' / 'error' / 'info' for status messages, or 'inherit' to adopt the parent's color.
      */
     color?: TextColor;
     /**
-     * Adds an ellipsis to a single line of text if it overflows.
+     * Adds an ellipsis to a single line of text if it overflows the container width.
      */
     ellipsis?: boolean;
     /**
-     * Size of the text. Also defines the size for specific breakpoints, like {base: "small", l: "medium"}. You always need to provide a base value when doing this.
+     * Size of the text. Also defines the size for specific breakpoints, like {base: "sm", l: "md"}.
      */
     size?: BreakpointCustomizable<TextSize>;
     /**
-     * Sets a custom HTML tag depending on the usage of the text component.
+     * Sets the HTML tag of the rendered element to ensure correct semantic meaning (e.g. 'p' for paragraphs, 'blockquote' for quotes).
      */
     tag?: TextTag;
     /**
-     * The weight of the text.
+     * The font weight of the text.
      */
     weight?: TextWeight;
 };
 export declare const PText: 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"> & {
     /**
-     * Text alignment of the component.
+     * Text alignment of the text.
      */
     align?: TextAlign;
     /**
-     * Basic text color variations.
+     * Text color of the text. Use 'primary' for default, 'contrast-high' / 'contrast-medium' for alternative emphasis, 'success' / 'warning' / 'error' / 'info' for status messages, or 'inherit' to adopt the parent's color.
      */
     color?: TextColor;
     /**
-     * Adds an ellipsis to a single line of text if it overflows.
+     * Adds an ellipsis to a single line of text if it overflows the container width.
      */
     ellipsis?: boolean;
     /**
-     * Size of the text. Also defines the size for specific breakpoints, like {base: "small", l: "medium"}. You always need to provide a base value when doing this.
+     * Size of the text. Also defines the size for specific breakpoints, like {base: "sm", l: "md"}.
      */
     size?: BreakpointCustomizable<TextSize>;
     /**
-     * Sets a custom HTML tag depending on the usage of the text component.
+     * Sets the HTML tag of the rendered element to ensure correct semantic meaning (e.g. 'p' for paragraphs, 'blockquote' for quotes).
      */
     tag?: TextTag;
     /**
-     * The weight of the text.
+     * The font weight of the text.
      */
     weight?: TextWeight;
 } & {

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

@@ -6,7 +6,7 @@ export type PTextareaProps = BaseProps & {
      */
     autoComplete?: string;
     /**
-     * A boolean value that, if present, renders the textarea as a compact version.
+     * Displays the textarea in compact mode.
      */
     compact?: boolean;
     /**
@@ -18,7 +18,7 @@ export type PTextareaProps = BaseProps & {
      */
     description?: string;
     /**
-     * A boolean value that, if present, makes the textarea unusable and unclickable. The value will not be submitted with the form.
+     * Disables the textarea. The value will not be submitted with the form.
      */
     disabled?: boolean;
     /**
@@ -26,7 +26,7 @@ export type PTextareaProps = BaseProps & {
      */
     form?: string;
     /**
-     * Controls the visibility of the label.
+     * Shows or hides the label. For better accessibility, it is recommended to show the label.
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
@@ -104,7 +104,7 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<Omit<i
      */
     autoComplete?: string;
     /**
-     * A boolean value that, if present, renders the textarea as a compact version.
+     * Displays the textarea in compact mode.
      */
     compact?: boolean;
     /**
@@ -116,7 +116,7 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<Omit<i
      */
     description?: string;
     /**
-     * A boolean value that, if present, makes the textarea unusable and unclickable. The value will not be submitted with the form.
+     * Disables the textarea. The value will not be submitted with the form.
      */
     disabled?: boolean;
     /**
@@ -124,7 +124,7 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<Omit<i
      */
     form?: string;
     /**
-     * Controls the visibility of the label.
+     * Shows or hides the label. For better accessibility, it is recommended to show the label.
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**

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

@@ -2,37 +2,37 @@ import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, WordmarkAriaAttribute, WordmarkSize, WordmarkTarget } from '../types';
 export type PWordmarkProps = BaseProps & {
     /**
-     * Add ARIA attributes.
+     * Sets ARIA attributes.
      */
     aria?: SelectedAriaAttributes<WordmarkAriaAttribute>;
     /**
-     * When providing an url then the component will be rendered as `<a>`.
+     * When `href` is provided, the component renders as an `<a>` element.
      */
     href?: string;
     /**
-     * Adapts sizing of wordmark.
+     * Controls the size of the wordmark.
      */
     size?: WordmarkSize;
     /**
-     * Target attribute where the link should be opened.
+     * Specifies where to open the linked document.
      */
     target?: WordmarkTarget;
 };
 export declare const PWordmark: 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"> & {
     /**
-     * Add ARIA attributes.
+     * Sets ARIA attributes.
      */
     aria?: SelectedAriaAttributes<WordmarkAriaAttribute>;
     /**
-     * When providing an url then the component will be rendered as `<a>`.
+     * When `href` is provided, the component renders as an `<a>` element.
      */
     href?: string;
     /**
-     * Adapts sizing of wordmark.
+     * Controls the size of the wordmark.
      */
     size?: WordmarkSize;
     /**
-     * Target attribute where the link should be opened.
+     * Specifies where to open the linked document.
      */
     target?: WordmarkTarget;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,8 +1,8 @@
 import { Component } from 'react';
 /**
  * @slot {"name": "heading", "description": "Renders a heading above the carousel." }
- * @slot {"name": "description", "description": "Shows a footer section, flowing under the content area when scrollable." }
- * @slot {"name": "controls", "description": "Shows a sidebar area on the **start** side (**left** in **LTR** mode / **right** in **RTL** mode). On mobile view it transforms into a flyout." }
+ * @slot {"name": "description", "description": "Renders descriptive content below the heading." }
+ * @slot {"name": "controls", "description": "Renders custom controls such as navigation buttons or indicators." }
  * @slot {"name": "", "description": "Default slot for the carousel slides." }
  *
  * @controlled { "props": ["activeSlideIndex"], "event": "update", "isInternallyMutated": true }

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

@@ -1,6 +1,8 @@
 import { Component } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the display text." }
+ *
+ * @deprecated since v4.0.0, will be removed with next major release. Please use `p-heading` instead.
  */
 export declare class DSRDisplay extends Component<any> {
     host: HTMLElement;

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

@@ -1,8 +1,8 @@
 import { Component } from 'react';
 /**
  * @slot {"name": "", "description": "Default slot for the main content." }
- * @slot {"name": "button", "description": "Shows a custom button to reach a deeper level of the navigation structure." } *
- * @slot {"name": "header", "description": "Shows a custom header section on mobile view" } *
+ * @slot {"name": "button", "description": "Shows a custom button to reach a deeper level of the navigation structure." }
+ * @slot {"name": "header", "description": "Shows a custom header section on mobile view." }
  * @experimental
  */
 export declare class DSRDrilldownItem extends Component<any> {

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

@@ -3,7 +3,7 @@ import { Component } from 'react';
  * @slot {"name": "header", "description": "Renders a sticky header section above the content area." }
  * @slot {"name": "", "description": "Default slot for the main content." }
  * @slot {"name": "footer", "description": "Shows a sticky footer section, flowing under the content area when scrollable." }
- * @slot {"name": "sub-footer", "description": "Shows a sub-footer section to display additional information below the footer. This slot is ideal for less critical content, such as legal information or FAQs, which provides further details to the user. It appears when scrolling to the end of the flyout or when there is available space to accommodate the content." }
+ * @slot {"name": "sub-footer", "description": "Renders additional content below the footer, such as legal information or FAQs. It appears when the flyout has enough space or when the user scrolls to the end." }
  *
  * @controlled {"props": ["open"], "event": "dismiss"}
  */

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

@@ -4,9 +4,11 @@ import { Component } from 'react';
  */
 export declare class DSRScroller extends Component<any> {
     host: HTMLElement;
-    private isPrevHidden;
-    private isNextHidden;
+    private isIndicatorPrevVisible;
+    private isIndicatorNextVisible;
     private intersectionObserver;
-    private scrollAreaElement;
+    private scrollArea;
+    private sentinelLeft;
+    private sentinelRight;
     render(): JSX.Element;
 }

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

@@ -4,8 +4,9 @@ import { Component } from 'react';
  */
 export declare class DSRStepperHorizontal extends Component<any> {
     host: HTMLElement;
+    private scroller;
     private stepperHorizontalItems;
-    private scrollerElement;
-    private currentStepIndex;
+    private slot;
+    private resizeObserver;
     render(): JSX.Element;
 }

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

@@ -6,12 +6,12 @@ import { Component } from 'react';
  */
 export declare class DSRTabsBar extends Component<any> {
     host: HTMLElement;
-    private tabElements;
-    private internalTabIndex;
-    private barElement;
-    private scrollerElement;
-    private direction;
+    private tabs;
+    private bar;
+    private scroller;
+    private slot;
     private hasPTabsParent;
-    private areTabsButtons;
+    private isTabList;
+    private resizeObserver;
     render(): JSX.Element;
 }

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

@@ -6,6 +6,7 @@ import { Component } from 'react';
  */
 export declare class DSRTabs extends Component<any> {
     host: HTMLElement;
-    private tabsItemElements;
+    private tabsItems;
+    private slot;
     render(): JSX.Element;
 }