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

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

@@ -2,72 +2,72 @@ import type { BaseProps } from '../../BaseProps';
 import type { SelectDropdownDirection, BreakpointCustomizable, SelectChangeEventDetail, SelectToggleEventDetail, SelectState } from '../types';
 export type PSelectProps = BaseProps & {
     /**
-     * Displays the select in compact mode.
+     * Reduces the control height and padding for use in dense layouts where vertical space is limited.
      * @default false
      */
     compact?: boolean;
     /**
-     * Supplementary text providing more context or explanation for the select.
+     * Sets a supplementary description displayed below the label to give users additional guidance about the select.
      * @default ''
      */
     description?: string;
     /**
-     * Disables the select.
+     * Prevents user interaction with the select and excludes its value from form submissions.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Changes the direction to which the dropdown list appears.
+     * Controls whether the dropdown list opens upward (`up`) or downward (`down`), or determines the direction automatically (`auto`).
      * @default 'auto'
      */
     dropdownDirection?: SelectDropdownDirection;
     /**
-     * Shows an input in the dropdown allowing options to be filtered. Will be ignored if the `filter` slot is used.
+     * Shows a text input inside the dropdown that filters the visible options as the user types. Ignored when the `filter` slot is used.
      * @default false
      */
     filter?: boolean;
     /**
-     * The id of a form element the select should be associated with.
+     * Associates the select with a form element by its ID when it is not a direct descendant of that form.
      */
     form?: string;
     /**
-     * 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>;
     /**
-     * Text content for a user-facing label.
+     * Sets the visible label text displayed above the select control to identify its purpose.
      * @default ''
      */
     label?: string;
     /**
-     * The message styled depending on validation state.
+     * Sets the validation feedback message displayed below the select when `state` is `success` or `error`.
      * @default ''
      */
     message?: string;
     /**
-     * The name of the control.
+     * Sets the name of the control submitted with the form data, identifying the selected value on the server.
      */
     name: string;
     /**
-     * Emitted when the select has lost focus.
+     * Emitted when the select component loses focus, useful for triggering validation on blur.
      */
     onBlur?: (event: CustomEvent<void>) => void;
     /**
-     * Emitted when the selection is changed.
+     * Emitted when the user selects a different option, carrying the new value in the event detail.
      */
     onChange?: (event: CustomEvent<SelectChangeEventDetail>) => void;
     /**
-     * Emitted when the dropdown is toggled.
+     * Emitted when the dropdown list opens or closes, carrying the new `isOpen` state in the event detail.
      */
     onToggle?: (event: CustomEvent<SelectToggleEventDetail>) => void;
     /**
-     * Requires an option with a non-empty string value to be selected.
+     * Marks the select as required so the form cannot be submitted unless a non-empty option is selected.
      * @default false
      */
     required?: boolean;
     /**
-     * The validation state.
+     * Sets the validation state of the select, which controls its visual appearance and feedback message style (`none`, `success`, `error`).
      * @default 'none'
      */
     state?: SelectState;
@@ -78,72 +78,72 @@ export type PSelectProps = BaseProps & {
 };
 export declare const PSelect: 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 select in compact mode.
+     * Reduces the control height and padding for use in dense layouts where vertical space is limited.
      * @default false
      */
     compact?: boolean;
     /**
-     * Supplementary text providing more context or explanation for the select.
+     * Sets a supplementary description displayed below the label to give users additional guidance about the select.
      * @default ''
      */
     description?: string;
     /**
-     * Disables the select.
+     * Prevents user interaction with the select and excludes its value from form submissions.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Changes the direction to which the dropdown list appears.
+     * Controls whether the dropdown list opens upward (`up`) or downward (`down`), or determines the direction automatically (`auto`).
      * @default 'auto'
      */
     dropdownDirection?: SelectDropdownDirection;
     /**
-     * Shows an input in the dropdown allowing options to be filtered. Will be ignored if the `filter` slot is used.
+     * Shows a text input inside the dropdown that filters the visible options as the user types. Ignored when the `filter` slot is used.
      * @default false
      */
     filter?: boolean;
     /**
-     * The id of a form element the select should be associated with.
+     * Associates the select with a form element by its ID when it is not a direct descendant of that form.
      */
     form?: string;
     /**
-     * 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>;
     /**
-     * Text content for a user-facing label.
+     * Sets the visible label text displayed above the select control to identify its purpose.
      * @default ''
      */
     label?: string;
     /**
-     * The message styled depending on validation state.
+     * Sets the validation feedback message displayed below the select when `state` is `success` or `error`.
      * @default ''
      */
     message?: string;
     /**
-     * The name of the control.
+     * Sets the name of the control submitted with the form data, identifying the selected value on the server.
      */
     name: string;
     /**
-     * Emitted when the select has lost focus.
+     * Emitted when the select component loses focus, useful for triggering validation on blur.
      */
     onBlur?: (event: CustomEvent<void>) => void;
     /**
-     * Emitted when the selection is changed.
+     * Emitted when the user selects a different option, carrying the new value in the event detail.
      */
     onChange?: (event: CustomEvent<SelectChangeEventDetail>) => void;
     /**
-     * Emitted when the dropdown is toggled.
+     * Emitted when the dropdown list opens or closes, carrying the new `isOpen` state in the event detail.
      */
     onToggle?: (event: CustomEvent<SelectToggleEventDetail>) => void;
     /**
-     * Requires an option with a non-empty string value to be selected.
+     * Marks the select as required so the form cannot be submitted unless a non-empty option is selected.
      * @default false
      */
     required?: boolean;
     /**
-     * The validation state.
+     * Sets the validation state of the select, which controls its visual appearance and feedback message style (`none`, `success`, `error`).
      * @default 'none'
      */
     state?: SelectState;

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

@@ -2,76 +2,76 @@ import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, SheetAriaAttribute, SheetBackground, SheetMotionHiddenEndEventDetail, SheetMotionVisibleEndEventDetail } from '../types';
 export type PSheetProps = BaseProps & {
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the sheet dialog element for improved accessibility when the default `aria-label` is insufficient.
      */
     aria?: SelectedAriaAttributes<SheetAriaAttribute>;
     /**
-     * Defines the background color
+     * Sets the background color of the sheet panel (`canvas` or `surface`).
      * @default 'canvas'
      */
     background?: SheetBackground;
     /**
-     * If true, the sheet will not be closable via backdrop click.
+     * When enabled, clicking the backdrop will not close the sheet.
      * @default false
      */
     disableBackdropClick?: boolean;
     /**
-     * If false, the sheet will not have a dismiss button.
+     * Shows a dismiss button in the sheet header so users can manually close it.
      * @default true
      */
     dismissButton?: boolean;
     /**
-     * Emitted when the component requests to be dismissed.
+     * Emitted when the user dismisses the sheet via the close button, backdrop click, or Escape key.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * Emitted when the sheet is closed and the transition is finished.
+     * Emitted after the sheet's close transition has fully completed and the panel is hidden.
      */
     onMotionHiddenEnd?: (event: CustomEvent<SheetMotionHiddenEndEventDetail>) => void;
     /**
-     * Emitted when the sheet is opened and the transition is finished.
+     * Emitted after the sheet's open transition has fully completed and the panel is visible.
      */
     onMotionVisibleEnd?: (event: CustomEvent<SheetMotionVisibleEndEventDetail>) => void;
     /**
-     * If true, the sheet is open.
+     * Controls whether the sheet panel slides in from the bottom and is visible to the user.
      * @default false
      */
     open: boolean;
 };
 export declare const PSheet: 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 sheet dialog element for improved accessibility when the default `aria-label` is insufficient.
      */
     aria?: SelectedAriaAttributes<SheetAriaAttribute>;
     /**
-     * Defines the background color
+     * Sets the background color of the sheet panel (`canvas` or `surface`).
      * @default 'canvas'
      */
     background?: SheetBackground;
     /**
-     * If true, the sheet will not be closable via backdrop click.
+     * When enabled, clicking the backdrop will not close the sheet.
      * @default false
      */
     disableBackdropClick?: boolean;
     /**
-     * If false, the sheet will not have a dismiss button.
+     * Shows a dismiss button in the sheet header so users can manually close it.
      * @default true
      */
     dismissButton?: boolean;
     /**
-     * Emitted when the component requests to be dismissed.
+     * Emitted when the user dismisses the sheet via the close button, backdrop click, or Escape key.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * Emitted when the sheet is closed and the transition is finished.
+     * Emitted after the sheet's close transition has fully completed and the panel is hidden.
      */
     onMotionHiddenEnd?: (event: CustomEvent<SheetMotionHiddenEndEventDetail>) => void;
     /**
-     * Emitted when the sheet is opened and the transition is finished.
+     * Emitted after the sheet's open transition has fully completed and the panel is visible.
      */
     onMotionVisibleEnd?: (event: CustomEvent<SheetMotionVisibleEndEventDetail>) => void;
     /**
-     * If true, the sheet is open.
+     * Controls whether the sheet panel slides in from the bottom and is visible to the user.
      * @default false
      */
     open: boolean;

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

@@ -2,32 +2,32 @@ import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, SpinnerAriaAttribute, SpinnerColor, BreakpointCustomizable, SpinnerSize } from '../types';
 export type PSpinnerProps = BaseProps & {
     /**
-     * Sets ARIA attributes.
+     * Sets ARIA attributes on the spinner's live region element; use `aria-label` to provide a descriptive loading message for screen readers.
      */
     aria?: SelectedAriaAttributes<SpinnerAriaAttribute>;
     /**
-     * Basic color variations.
+     * Sets the color of the spinning indicator using PDS semantic color tokens (e.g. `primary`, `contrast-high`, `inherit`).
      * @default 'primary'
      */
     color?: SpinnerColor;
     /**
-     * Defines the size of the spinner, aligned with the typographic scale used by components such as p-icon, p-flag, p-text, and p-heading. When set to `inherit`, the size is derived from a custom font-size defined on a parent element, calculated against the global line-height (based on `ex`-unit) to remain visually consistent with other typographic-scale-based components.
+     * Sets the size of the spinner using the PDS typographic scale. Use `inherit` to derive the size from the parent element's font-size. Supports responsive breakpoint values.
      * @default 'sm'
      */
     size?: BreakpointCustomizable<SpinnerSize>;
 };
 export declare const PSpinner: 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 spinner's live region element; use `aria-label` to provide a descriptive loading message for screen readers.
      */
     aria?: SelectedAriaAttributes<SpinnerAriaAttribute>;
     /**
-     * Basic color variations.
+     * Sets the color of the spinning indicator using PDS semantic color tokens (e.g. `primary`, `contrast-high`, `inherit`).
      * @default 'primary'
      */
     color?: SpinnerColor;
     /**
-     * Defines the size of the spinner, aligned with the typographic scale used by components such as p-icon, p-flag, p-text, and p-heading. When set to `inherit`, the size is derived from a custom font-size defined on a parent element, calculated against the global line-height (based on `ex`-unit) to remain visually consistent with other typographic-scale-based components.
+     * Sets the size of the spinner using the PDS typographic scale. Use `inherit` to derive the size from the parent element's font-size. Supports responsive breakpoint values.
      * @default 'sm'
      */
     size?: BreakpointCustomizable<SpinnerSize>;

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

@@ -7,7 +7,7 @@ export type PStepperHorizontalItemProps = BaseProps & {
      */
     disabled?: boolean;
     /**
-     * The validation state.
+     * The current progression state of the step. Use `current` for the active step, `complete` for finished steps, `warning` for steps with issues. Leave unset for future steps.
      */
     state?: StepperHorizontalItemState;
 };
@@ -18,7 +18,7 @@ export declare const PStepperHorizontalItem: import("react").ForwardRefExoticCom
      */
     disabled?: boolean;
     /**
-     * The validation state.
+     * The current progression state of the step. Use `current` for the active step, `complete` for finished steps, `warning` for steps with issues. Leave unset for future steps.
      */
     state?: StepperHorizontalItemState;
 } & {

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

@@ -6,7 +6,7 @@ export type PStepperHorizontalProps = BaseProps & {
      */
     onUpdate?: (event: CustomEvent<StepperHorizontalUpdateEventDetail>) => void;
     /**
-     * The text size.
+     * The font size of the step labels.
      * @default 'small'
      */
     size?: BreakpointCustomizable<StepperHorizontalSize>;
@@ -17,7 +17,7 @@ export declare const PStepperHorizontal: import("react").ForwardRefExoticCompone
      */
     onUpdate?: (event: CustomEvent<StepperHorizontalUpdateEventDetail>) => void;
     /**
-     * The text size.
+     * The font size of the step labels.
      * @default 'small'
      */
     size?: BreakpointCustomizable<StepperHorizontalSize>;

package/ssr/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/ssr/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/ssr/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/ssr/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>;