@porsche-design-system/components-react 4.0.0-beta.2 → 4.0.0-beta.4

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

@@ -1,54 +1,62 @@
 import type { BaseProps } from '../../BaseProps';
-import type { TextAlign, TextColor, BreakpointCustomizable, TextSize, TextTag, TextWeight } from '../types';
+import type { TextAlign, TextColor, TextHyphens, BreakpointCustomizable, TextSize, TextTag, TextWeight } from '../types';
 export type PTextProps = BaseProps & {
     /**
-     * Text alignment of the component.
+     * Text alignment of the text. Use 'start' for left-aligned text (in LTR), 'center' for centered, 'end' for right-aligned (in LTR), or 'inherit' to adopt the parent's alignment.
      */
     align?: TextAlign;
     /**
-     * Basic text color variations.
+     * Text color of the text. Use 'primary' for default, 'contrast-higher' / 'contrast-high' / 'contrast-medium' for alternative emphasis levels, '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. When enabled, the text is truncated to a single line with `text-overflow: ellipsis`. Cannot be combined with multi-line content.
      */
     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.
+     * Controls the hyphenation behavior of the text. Use 'auto' to let the browser automatically hyphenate words at appropriate points, 'manual' to only hyphenate at manually inserted hyphenation points (e.g. `­`), 'none' to disable hyphenation entirely, or 'inherit' to adopt the parent's hyphenation setting.
+     */
+    hyphens?: TextHyphens;
+    /**
+     * Size of the text. Also defines the size for specific breakpoints, like {base: "sm", l: "md"}. You always need to provide a base value when doing this. Use 'inherit' to adopt the parent's font size.
      */
     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, 'time' for dates).
      */
     tag?: TextTag;
     /**
-     * The weight of the text.
+     * The font weight of the text. Use 'normal' for regular body text, 'semibold' for slightly emphasized text, or 'bold' for strong emphasis.
      */
     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. Use 'start' for left-aligned text (in LTR), 'center' for centered, 'end' for right-aligned (in LTR), or 'inherit' to adopt the parent's alignment.
      */
     align?: TextAlign;
     /**
-     * Basic text color variations.
+     * Text color of the text. Use 'primary' for default, 'contrast-higher' / 'contrast-high' / 'contrast-medium' for alternative emphasis levels, '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. When enabled, the text is truncated to a single line with `text-overflow: ellipsis`. Cannot be combined with multi-line content.
      */
     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.
+     * Controls the hyphenation behavior of the text. Use 'auto' to let the browser automatically hyphenate words at appropriate points, 'manual' to only hyphenate at manually inserted hyphenation points (e.g. `&shy;`), 'none' to disable hyphenation entirely, or 'inherit' to adopt the parent's hyphenation setting.
+     */
+    hyphens?: TextHyphens;
+    /**
+     * Size of the text. Also defines the size for specific breakpoints, like {base: "sm", l: "md"}. You always need to provide a base value when doing this. Use 'inherit' to adopt the parent's font size.
      */
     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, 'time' for dates).
      */
     tag?: TextTag;
     /**
-     * The weight of the text.
+     * The font weight of the text. Use 'normal' for regular body text, 'semibold' for slightly emphasized text, or 'bold' for strong emphasis.
      */
     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"}
  */