@porsche-design-system/components-react 4.2.0-rc.4 → 4.2.0

package/esm/lib/components/switch.wrapper.d.ts

@@ -2,82 +2,82 @@ import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, SwitchAlignLabel, SwitchUpdateEventDetail } from '../types';
 export type PSwitchProps = BaseProps & {
     /**
-     * Aligns the label.
+     * Sets the position of the slotted label relative to the switch toggle, either before (`start`) or after (`end`) it. Supports responsive breakpoint values.
      * @default 'end'
      */
     alignLabel?: BreakpointCustomizable<SwitchAlignLabel>;
     /**
-     * Visualize the switch with on/off status.
+     * Reflects the switch's current on/off state and allows setting the initial checked value when the component first renders.
      * @default false
      */
     checked?: boolean;
     /**
-     * Displays the switch in compact mode.
+     * Reduces the switch size and spacing for use in dense layouts where vertical space is limited.
      * @default false
      */
     compact?: boolean;
     /**
-     * Disables the switch. No events will be triggered while disabled state is active.
+     * Prevents user interaction with the switch and blocks all click and keyboard events while it is disabled.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.
      * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
-     * Disables the switch and shows a loading indicator. No events will be triggered while loading state is active.
+     * Disables the switch and shows a loading spinner to indicate an ongoing asynchronous toggle operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * Emitted when the checked state changes.
+     * Emitted when the user toggles the switch, carrying the new `checked` state in the event detail.
      */
     onUpdate?: (event: CustomEvent<SwitchUpdateEventDetail>) => void;
     /**
-     * Stretches the contents to max available space.
+     * Expands the space between the switch toggle and its label to fill the full available width of the container. Supports responsive breakpoint values.
      * @default false
      */
     stretch?: BreakpointCustomizable<boolean>;
 };
 export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Aligns the label.
+     * Sets the position of the slotted label relative to the switch toggle, either before (`start`) or after (`end`) it. Supports responsive breakpoint values.
      * @default 'end'
      */
     alignLabel?: BreakpointCustomizable<SwitchAlignLabel>;
     /**
-     * Visualize the switch with on/off status.
+     * Reflects the switch's current on/off state and allows setting the initial checked value when the component first renders.
      * @default false
      */
     checked?: boolean;
     /**
-     * Displays the switch in compact mode.
+     * Reduces the switch size and spacing for use in dense layouts where vertical space is limited.
      * @default false
      */
     compact?: boolean;
     /**
-     * Disables the switch. No events will be triggered while disabled state is active.
+     * Prevents user interaction with the switch and blocks all click and keyboard events while it is disabled.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.
      * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
-     * Disables the switch and shows a loading indicator. No events will be triggered while loading state is active.
+     * Disables the switch and shows a loading spinner to indicate an ongoing asynchronous toggle operation.
      * @default false
      */
     loading?: boolean;
     /**
-     * Emitted when the checked state changes.
+     * Emitted when the user toggles the switch, carrying the new `checked` state in the event detail.
      */
     onUpdate?: (event: CustomEvent<SwitchUpdateEventDetail>) => void;
     /**
-     * Stretches the contents to max available space.
+     * Expands the space between the switch toggle and its label to fill the full available width of the container. Supports responsive breakpoint values.
      * @default false
      */
     stretch?: BreakpointCustomizable<boolean>;

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

@@ -2,33 +2,33 @@ import type { BaseProps } from '../../BaseProps';
 import type { TableHeadCellSort } from '../types';
 export type PTableHeadCellProps = BaseProps & {
     /**
-     * Hides the label but keeps it accessible for screen readers. This property only takes effect when the `sort` prop is not set.
+     * Hides the visible column label while keeping it accessible to screen readers. Only applies when `sort` is not set.
      * @default false
      */
     hideLabel?: boolean;
     /**
-     * Allows slotted text to wrap onto multiple lines instead of being forced onto a single line.
+     * Allows the column header text to wrap onto multiple lines instead of being truncated to a single line.
      * @default false
      */
     multiline?: boolean;
     /**
-     * Defines sortability properties.
+     * Configures sorting behavior for this column by providing an `id`, `active` state, and current `direction` (`asc` or `desc`).
      */
     sort?: TableHeadCellSort;
 };
 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" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Hides the label but keeps it accessible for screen readers. This property only takes effect when the `sort` prop is not set.
+     * Hides the visible column label while keeping it accessible to screen readers. Only applies when `sort` is not set.
      * @default false
      */
     hideLabel?: boolean;
     /**
-     * Allows slotted text to wrap onto multiple lines instead of being forced onto a single line.
+     * Allows the column header text to wrap onto multiple lines instead of being truncated to a single line.
      * @default false
      */
     multiline?: boolean;
     /**
-     * Defines sortability properties.
+     * Configures sorting behavior for this column by providing an `id`, `active` state, and current `direction` (`asc` or `desc`).
      */
     sort?: TableHeadCellSort;
 } & {

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

@@ -2,50 +2,50 @@ import type { BaseProps } from '../../BaseProps';
 import type { TableLayout, TableUpdateEventDetail } from '../types';
 export type PTableProps = BaseProps & {
     /**
-     * A caption describing the contents of the table for accessibility only. This won't be visible in the browser. Use an element with an attribute of `slot="caption"` for a visible caption.
+     * Sets a screen-reader-only accessible caption that describes the table's content; it is not visible in the browser. Use an element with `slot="caption"` for a visible caption instead.
      */
     caption?: string;
     /**
-     * Displays with reduced spacing and smaller padding for a more condensed layout.
+     * Reduces the cell padding and spacing for a more condensed table layout in data-dense UIs.
      * @default false
      */
     compact?: boolean;
     /**
-     * Controls the layout behavior of the table.
+     * Controls the CSS `table-layout` algorithm: `auto` sizes columns to fit their content, `fixed` distributes width equally.
      * @default 'auto'
      */
     layout?: TableLayout;
     /**
-     * Emitted when sorting is changed.
+     * Emitted when the user clicks a sortable column header, carrying the new sort configuration in the event detail.
      */
     onUpdate?: (event: CustomEvent<TableUpdateEventDetail>) => void;
     /**
-     * @experimental Makes the scroll indicator sticky at the top or bottom while scrolling depending on the scroll direction.
+     * @experimental Makes the scroll position indicator sticky at the viewport edge while scrolling, indicating overflow in the table.
      * @default false
      */
     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" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * A caption describing the contents of the table for accessibility only. This won't be visible in the browser. Use an element with an attribute of `slot="caption"` for a visible caption.
+     * Sets a screen-reader-only accessible caption that describes the table's content; it is not visible in the browser. Use an element with `slot="caption"` for a visible caption instead.
      */
     caption?: string;
     /**
-     * Displays with reduced spacing and smaller padding for a more condensed layout.
+     * Reduces the cell padding and spacing for a more condensed table layout in data-dense UIs.
      * @default false
      */
     compact?: boolean;
     /**
-     * Controls the layout behavior of the table.
+     * Controls the CSS `table-layout` algorithm: `auto` sizes columns to fit their content, `fixed` distributes width equally.
      * @default 'auto'
      */
     layout?: TableLayout;
     /**
-     * Emitted when sorting is changed.
+     * Emitted when the user clicks a sortable column header, carrying the new sort configuration in the event detail.
      */
     onUpdate?: (event: CustomEvent<TableUpdateEventDetail>) => void;
     /**
-     * @experimental Makes the scroll indicator sticky at the top or bottom while scrolling depending on the scroll direction.
+     * @experimental Makes the scroll position indicator sticky at the viewport edge while scrolling, indicating overflow in the table.
      * @default false
      */
     sticky?: boolean;

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

@@ -2,24 +2,24 @@ import type { BaseProps } from '../../BaseProps';
 import type { TabsBarBackground, TabsBarUpdateEventDetail, BreakpointCustomizable, TabsBarSize, TabsBarWeight } from '../types';
 export type PTabsBarProps = BaseProps & {
     /**
-     * Defines which tab is shown as selected (zero-based numbering), or `undefined` if none should be selected.
+     * Sets the zero-based index of the currently active tab. Pass `undefined` to render all tabs in an unselected state.
      */
     activeTabIndex?: number | undefined;
     /**
-     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     * Sets the background color of the tabs bar. Use `frosted` only when placed on top of images, videos, or gradients.
      * @default 'none'
      */
     background?: TabsBarBackground;
     /**
-     * Displays with reduced spacing and smaller padding for a more condensed layout.
+     * Reduces the tab height and padding for use in dense layouts where vertical space is limited.
      */
     compact?: boolean;
     /**
-     * Emitted when active tab is changed.
+     * Emitted when the user clicks a different tab, carrying the new `activeTabIndex` in the event detail.
      */
     onUpdate?: (event: CustomEvent<TabsBarUpdateEventDetail>) => void;
     /**
-     * The text size.
+     * Sets the font size of the tab labels using the PDS typographic scale. Supports responsive breakpoint values.
      * @default 'small'
      */
     size?: BreakpointCustomizable<TabsBarSize>;
@@ -31,24 +31,24 @@ export type PTabsBarProps = BaseProps & {
 };
 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" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Defines which tab is shown as selected (zero-based numbering), or `undefined` if none should be selected.
+     * Sets the zero-based index of the currently active tab. Pass `undefined` to render all tabs in an unselected state.
      */
     activeTabIndex?: number | undefined;
     /**
-     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     * Sets the background color of the tabs bar. Use `frosted` only when placed on top of images, videos, or gradients.
      * @default 'none'
      */
     background?: TabsBarBackground;
     /**
-     * Displays with reduced spacing and smaller padding for a more condensed layout.
+     * Reduces the tab height and padding for use in dense layouts where vertical space is limited.
      */
     compact?: boolean;
     /**
-     * Emitted when active tab is changed.
+     * Emitted when the user clicks a different tab, carrying the new `activeTabIndex` in the event detail.
      */
     onUpdate?: (event: CustomEvent<TabsBarUpdateEventDetail>) => void;
     /**
-     * The text size.
+     * Sets the font size of the tab labels using the PDS typographic scale. Supports responsive breakpoint values.
      * @default 'small'
      */
     size?: BreakpointCustomizable<TabsBarSize>;

package/esm/lib/components/tabs-item.wrapper.d.ts

@@ -1,13 +1,13 @@
 import type { BaseProps } from '../../BaseProps';
 export type PTabsItemProps = BaseProps & {
     /**
-     * Defines the label used in tabs.
+     * Sets the label text displayed in the tab navigation button that the user clicks to activate this tab's content.
      */
     label: string;
 };
 export declare const PTabsItem: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Defines the label used in tabs.
+     * Sets the label text displayed in the tab navigation button that the user clicks to activate this tab's content.
      */
     label: string;
 } & {

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

@@ -2,25 +2,25 @@ import type { BaseProps } from '../../BaseProps';
 import type { TabsBackground, TabsUpdateEventDetail, BreakpointCustomizable, TabsSize, TabsWeight } from '../types';
 export type PTabsProps = BaseProps & {
     /**
-     * Defines which tab is shown as selected (zero-based numbering).
+     * Sets the zero-based index of the currently active tab; update this prop to switch tabs programmatically.
      * @default 0
      */
     activeTabIndex?: number;
     /**
-     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     * Sets the background color of the tabs bar. Use `frosted` only when placed on top of images, videos, or gradients.
      * @default 'none'
      */
     background?: TabsBackground;
     /**
-     * Displays with reduced spacing and smaller padding for a more condensed layout.
+     * Reduces the tab height and padding for use in dense layouts where vertical space is limited.
      */
     compact?: boolean;
     /**
-     * Emitted when active tab is changed.
+     * Emitted when the user switches to a different tab, carrying the new `activeTabIndex` in the event detail.
      */
     onUpdate?: (event: CustomEvent<TabsUpdateEventDetail>) => void;
     /**
-     * The text size.
+     * Sets the font size of the tab labels using the PDS typographic scale. Supports responsive breakpoint values.
      * @default 'small'
      */
     size?: BreakpointCustomizable<TabsSize>;
@@ -32,25 +32,25 @@ export type PTabsProps = BaseProps & {
 };
 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" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Defines which tab is shown as selected (zero-based numbering).
+     * Sets the zero-based index of the currently active tab; update this prop to switch tabs programmatically.
      * @default 0
      */
     activeTabIndex?: number;
     /**
-     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     * Sets the background color of the tabs bar. Use `frosted` only when placed on top of images, videos, or gradients.
      * @default 'none'
      */
     background?: TabsBackground;
     /**
-     * Displays with reduced spacing and smaller padding for a more condensed layout.
+     * Reduces the tab height and padding for use in dense layouts where vertical space is limited.
      */
     compact?: boolean;
     /**
-     * Emitted when active tab is changed.
+     * Emitted when the user switches to a different tab, carrying the new `activeTabIndex` in the event detail.
      */
     onUpdate?: (event: CustomEvent<TabsUpdateEventDetail>) => void;
     /**
-     * The text size.
+     * Sets the font size of the tab labels using the PDS typographic scale. Supports responsive breakpoint values.
      * @default 'small'
      */
     size?: BreakpointCustomizable<TabsSize>;

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

@@ -2,31 +2,31 @@ import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, TagDismissibleAriaAttribute } from '../types';
 export type PTagDismissibleProps = BaseProps & {
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the dismiss button element, for example use `aria-label` to provide a descriptive close action for screen readers.
      */
     aria?: SelectedAriaAttributes<TagDismissibleAriaAttribute>;
     /**
-     * Displays the dismissible tag in compact mode.
+     * Reduces the tag's padding and height for use in dense layouts where vertical space is limited.
      * @default false
      */
     compact?: boolean;
     /**
-     * Text content for a user-facing label.
+     * Sets the visible label text displayed inside the tag alongside the dismiss button.
      */
     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" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the dismiss button element, for example use `aria-label` to provide a descriptive close action for screen readers.
      */
     aria?: SelectedAriaAttributes<TagDismissibleAriaAttribute>;
     /**
-     * Displays the dismissible tag in compact mode.
+     * Reduces the tag's padding and height for use in dense layouts where vertical space is limited.
      * @default false
      */
     compact?: boolean;
     /**
-     * Text content for a user-facing label.
+     * Sets the visible label text displayed inside the tag alongside the dismiss button.
      */
     label?: string;
 } & {

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

@@ -2,42 +2,42 @@ import type { BaseProps } from '../../BaseProps';
 import type { TagIcon, TagVariant } from '../types';
 export type PTagProps = BaseProps & {
     /**
-     * Displays the tag in compact mode.
+     * Reduces the tag's padding and height for use in dense layouts where vertical space is limited.
      * @default false
      */
     compact?: boolean;
     /**
-     * The icon shown.
+     * Sets the icon displayed inside the tag alongside the label. Use `none` to render the tag without an icon.
      * @default 'none'
      */
     icon?: TagIcon;
     /**
-     * A URL path to a custom icon.
+     * Sets a URL to a custom SVG icon, overriding the built-in icon set when a brand-specific icon is needed.
      */
     iconSource?: string;
     /**
-     * Background color variations.
+     * Sets the visual style of the tag, which controls its background and text colors (e.g. `primary`, `secondary`, `notification-info`).
      * @default 'secondary'
      */
     variant?: TagVariant;
 };
 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" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Displays the tag in compact mode.
+     * Reduces the tag's padding and height for use in dense layouts where vertical space is limited.
      * @default false
      */
     compact?: boolean;
     /**
-     * The icon shown.
+     * Sets the icon displayed inside the tag alongside the label. Use `none` to render the tag without an icon.
      * @default 'none'
      */
     icon?: TagIcon;
     /**
-     * A URL path to a custom icon.
+     * Sets a URL to a custom SVG icon, overriding the built-in icon set when a brand-specific icon is needed.
      */
     iconSource?: string;
     /**
-     * Background color variations.
+     * Sets the visual style of the tag, which controls its background and text colors (e.g. `primary`, `secondary`, `notification-info`).
      * @default 'secondary'
      */
     variant?: TagVariant;

package/esm/lib/components/text-list.wrapper.d.ts

@@ -2,14 +2,14 @@ import type { BaseProps } from '../../BaseProps';
 import type { TextListType } from '../types';
 export type PTextListProps = BaseProps & {
     /**
-     * The list style type.
+     * Sets the list type to either `unordered` (bulleted) or `ordered` (numbered), controlling the rendered HTML element (`ul` vs `ol`).
      * @default 'unordered'
      */
     type?: TextListType;
 };
 export declare const PTextList: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * The list style type.
+     * Sets the list type to either `unordered` (bulleted) or `ordered` (numbered), controlling the rendered HTML element (`ul` vs `ol`).
      * @default 'unordered'
      */
     type?: TextListType;