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

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

@@ -2,7 +2,7 @@ import type { BaseProps } from '../../BaseProps';
 import type { ScrollerAlignScrollIndicator, SelectedAriaAttributes, ScrollerAriaAttribute, ScrollerScrollToPosition } from '../types';
 export type PScrollerProps = BaseProps & {
     /**
-     * Sets the vertical position of scroll indicator.
+     * @deprecated since v4.0.0, will be removed with next major release, has no effect anymore.
      */
     alignScrollIndicator?: ScrollerAlignScrollIndicator;
     /**
@@ -10,17 +10,25 @@ export type PScrollerProps = BaseProps & {
      */
     aria?: SelectedAriaAttributes<ScrollerAriaAttribute>;
     /**
-     * Scrolls the scroll area to the left either smooth or immediately.
+     * Displays with reduced spacing and smaller padding for a more condensed layout.
+     */
+    compact?: boolean;
+    /**
+     * @deprecated since v4.0.0, use native `scrollIntoView()` on the slotted element itself.
      */
     scrollToPosition?: ScrollerScrollToPosition;
     /**
      * Specifies if scrollbar should be shown.
      */
     scrollbar?: boolean;
+    /**
+     * @experimental Makes the indicator sticky at the top or bottom while scrolling depending on the scroll direction.
+     */
+    sticky?: boolean;
 };
 export declare const PScroller: 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"> & {
     /**
-     * Sets the vertical position of scroll indicator.
+     * @deprecated since v4.0.0, will be removed with next major release, has no effect anymore.
      */
     alignScrollIndicator?: ScrollerAlignScrollIndicator;
     /**
@@ -28,13 +36,21 @@ export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<i
      */
     aria?: SelectedAriaAttributes<ScrollerAriaAttribute>;
     /**
-     * Scrolls the scroll area to the left either smooth or immediately.
+     * Displays with reduced spacing and smaller padding for a more condensed layout.
+     */
+    compact?: boolean;
+    /**
+     * @deprecated since v4.0.0, use native `scrollIntoView()` on the slotted element itself.
      */
     scrollToPosition?: ScrollerScrollToPosition;
     /**
      * Specifies if scrollbar should be shown.
      */
     scrollbar?: boolean;
+    /**
+     * @experimental Makes the 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/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.
      */
     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,7 +22,7 @@ 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;
 };
@@ -23,6 +31,14 @@ export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<im
      * Defines which tab to be visualized as selected (zero-based numbering), 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).
      */
     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,7 +22,7 @@ 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;
 };
@@ -23,6 +31,14 @@ export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<impor
      * Defines which tab to be visualized 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/dsr-components/accordion.d.ts

@@ -1,11 +1,17 @@
 import { Component } from 'react';
 /**
- * @slot {"name": "heading", "description": "Defines the heading used in the accordion. Can be used alternatively to the heading prop. Please **refrain** from using any other than text content as slotted markup." }
- * @slot {"name": "", "description": "Default slot for the main content" }
+ * @slot {"name": "summary", "description": "Content for the accordion's summary section. Clicking toggles the accordion open and closed." }
+ * @slot {"name": "summary-before", "description": "Content or interactive elements placed before the accordion's summary section." }
+ * @slot {"name": "summary-after", "description": "Content or interactive elements placed after the accordion's summary section." }
+ * @slot {"name": "heading", "description": "Content for the accordion's heading section. Clicking toggles the accordion open and closed.", "isDeprecated": true }
+ * @slot {"name": "", "description": "Main content displayed when the accordion is expanded." }
  *
  * @controlled {"props": ["open"], "event": "update"}
  */
 export declare class DSRAccordion extends Component<any> {
     host: HTMLElement;
+    private hasSummary;
+    private hasSummaryBefore;
+    private hasSummaryAfter;
     render(): JSX.Element;
 }

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;
 }

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

@@ -621,27 +621,6 @@ declare const FLAG_NAMES: readonly [
     "za"
 ];
 export type FlagName = typeof FLAG_NAMES[number];
-declare const FORM_STATES: readonly [
-    "none",
-    "error",
-    "success"
-];
-export type FormState = (typeof FORM_STATES)[number];
-declare const BUTTON_ARIA_ATTRIBUTES: readonly [
-    "aria-label",
-    "aria-description",
-    "aria-expanded",
-    "aria-pressed",
-    "aria-haspopup"
-];
-export type ButtonAriaAttribute = (typeof BUTTON_ARIA_ATTRIBUTES)[number];
-declare const LINK_ARIA_ATTRIBUTES: readonly [
-    "aria-label",
-    "aria-description",
-    "aria-current",
-    "aria-haspopup"
-];
-export type LinkAriaAttribute = (typeof LINK_ARIA_ATTRIBUTES)[number];
 declare const breakpoints: readonly [
     "base",
     "xs",
@@ -658,75 +637,6 @@ export type BreakpointValues<T> = {
     base: T;
 };
 export type BreakpointCustomizable<T> = T | BreakpointValues<T>;
-declare const LINK_TARGETS: readonly [
-    "_self",
-    "_blank",
-    "_parent",
-    "_top"
-];
-export type LinkTarget = (typeof LINK_TARGETS)[number] | string;
-declare const SCROLLER_ARIA_ATTRIBUTES: readonly [
-    "role"
-];
-export type ScrollerAriaAttribute = (typeof SCROLLER_ARIA_ATTRIBUTES)[number];
-export type ScrollerScrollToPosition = {
-    scrollPosition: number;
-    isSmooth?: boolean;
-} | string;
-declare const SCROLL_INDICATOR_POSITIONS: readonly [
-    "top",
-    "center"
-];
-export type ScrollerAlignScrollIndicator = (typeof SCROLL_INDICATOR_POSITIONS)[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 TILE_ASPECT_RATIOS: readonly [
-    "1/1",
-    "4/3",
-    "3/4",
-    "16/9",
-    "9/16",
-    "auto"
-];
-export type TileAspectRatio = (typeof TILE_ASPECT_RATIOS)[number];
-declare const TILE_SIZES: readonly [
-    "medium",
-    "large",
-    "inherit"
-];
-export type TileSize = (typeof TILE_SIZES)[number];
-declare const TILE_WEIGHTS: readonly [
-    "regular",
-    "semi-bold"
-];
-export type TileWeight = (typeof TILE_WEIGHTS)[number];
-declare const TILE_ALIGNS: readonly [
-    "top",
-    "bottom"
-];
-export type TileAlign = (typeof TILE_ALIGNS)[number];
 declare const HEADING_SIZES: readonly [
     "small",
     "medium",
@@ -780,22 +690,29 @@ declare const TYPOGRAPHY_TEXT_WEIGHTS: readonly [
     "bold"
 ];
 export type TypographyTextWeight = (typeof TYPOGRAPHY_TEXT_WEIGHTS)[number];
-declare const ALIGN_LABELS: readonly [
-    "start",
-    "end"
+declare const LINK_BUTTON_VARIANTS: readonly [
+    "primary",
+    "secondary"
 ];
-export type AlignLabel = (typeof ALIGN_LABELS)[number];
+export type LinkButtonVariant = (typeof LINK_BUTTON_VARIANTS)[number];
 declare const BUTTON_TYPES: readonly [
     "button",
     "submit",
     "reset"
 ];
 export type ButtonType = (typeof BUTTON_TYPES)[number];
-declare const LINK_BUTTON_VARIANTS: readonly [
-    "primary",
-    "secondary"
+declare const ALIGN_LABELS: readonly [
+    "start",
+    "end"
 ];
-export type LinkButtonVariant = (typeof LINK_BUTTON_VARIANTS)[number];
+export type AlignLabel = (typeof ALIGN_LABELS)[number];
+declare const LINK_TARGETS: readonly [
+    "_self",
+    "_blank",
+    "_parent",
+    "_top"
+];
+export type LinkTarget = (typeof LINK_TARGETS)[number] | string;
 export type LinkButtonIconName = IconName | "none";
 export type ButtonVariant = LinkButtonVariant;
 export type LinkVariant = LinkButtonVariant;
@@ -814,15 +731,99 @@ export type SelectedAriaAttributes<T extends keyof AriaAttributes> = Pick<AriaAt
 export type SelectedAriaRole<T> = {
     role: Extract<AriaRole, T>;
 };
-declare const ACCORDION_SIZES: readonly [
-    "small",
-    "medium"
+declare const FORM_STATES: readonly [
+    "none",
+    "error",
+    "success"
 ];
-export type AccordionSize = (typeof ACCORDION_SIZES)[number];
+export type FormState = (typeof FORM_STATES)[number];
+declare const BUTTON_ARIA_ATTRIBUTES: readonly [
+    "aria-label",
+    "aria-description",
+    "aria-expanded",
+    "aria-pressed",
+    "aria-haspopup"
+];
+export type ButtonAriaAttribute = (typeof BUTTON_ARIA_ATTRIBUTES)[number];
+declare const LINK_ARIA_ATTRIBUTES: readonly [
+    "aria-label",
+    "aria-description",
+    "aria-current",
+    "aria-haspopup"
+];
+export type LinkAriaAttribute = (typeof LINK_ARIA_ATTRIBUTES)[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 TILE_ASPECT_RATIOS: readonly [
+    "1/1",
+    "4/3",
+    "3/4",
+    "16/9",
+    "9/16",
+    "auto"
+];
+export type TileAspectRatio = (typeof TILE_ASPECT_RATIOS)[number];
+declare const TILE_SIZES: readonly [
+    "medium",
+    "large",
+    "inherit"
+];
+export type TileSize = (typeof TILE_SIZES)[number];
+declare const TILE_WEIGHTS: readonly [
+    "regular",
+    "semi-bold"
+];
+export type TileWeight = (typeof TILE_WEIGHTS)[number];
+declare const TILE_ALIGNS: readonly [
+    "top",
+    "bottom"
+];
+export type TileAlign = (typeof TILE_ALIGNS)[number];
+declare const ACCORDIONS_BACKGROUNDS: readonly [
+    "canvas",
+    "surface",
+    "frosted",
+    "none"
+];
+export type AccordionBackground = (typeof ACCORDIONS_BACKGROUNDS)[number];
+declare const ACCORDION_ALIGN_MARKERS: readonly [
+    "start",
+    "end"
+];
+export type AccordionAlignMarker = (typeof ACCORDION_ALIGN_MARKERS)[number];
 export type AccordionUpdateEventDetail = {
     open: boolean;
 };
+/** @deprecated */
 export type AccordionHeadingTag = HeadingTag;
+declare const ACCORDION_SIZES: readonly [
+    "small",
+    "medium"
+];
+/** @deprecated */
+export type AccordionSize = (typeof ACCORDION_SIZES)[number];
 declare const BANNER_STATES: readonly [
     "info",
     "success",
@@ -1208,6 +1209,21 @@ export type GroupDirection = (typeof GROUP_DIRECTIONS)[number];
 export type RadioGroupState = FormState;
 export type RadioGroupDirection = GroupDirection;
 export type RadioGroupChangeEventDetail = Event;
+declare const SCROLLER_ALIGN_SCROLL_INDICATORS: readonly [
+    "top",
+    "center"
+];
+/** @deprecated */
+export type ScrollerAlignScrollIndicator = (typeof SCROLLER_ALIGN_SCROLL_INDICATORS)[number];
+declare const SCROLLER_ARIA_ATTRIBUTES: readonly [
+    "role"
+];
+export type ScrollerAriaAttribute = (typeof SCROLLER_ARIA_ATTRIBUTES)[number];
+/** @deprecated */
+export type ScrollerScrollToPosition = {
+    scrollPosition: number;
+    isSmooth?: boolean;
+} | string;
 export type SegmentedControlChangeEventDetail = {
     value: string | number;
 };
@@ -1277,27 +1293,43 @@ declare const TABS_SIZES: readonly [
     "medium"
 ];
 export type TabsSize = (typeof TABS_SIZES)[number];
+declare const TABS_BACKGROUNDS: readonly [
+    "canvas",
+    "surface",
+    "frosted",
+    "none"
+];
+export type TabsBackground = (typeof TABS_BACKGROUNDS)[number];
 declare const TABS_WEIGHTS: readonly [
     "regular",
     "semi-bold"
 ];
+/** @deprecated */
 export type TabsWeight = (typeof TABS_WEIGHTS)[number];
 export type TabsUpdateEventDetail = {
     activeTabIndex: number;
 };
+declare const TABS_BAR_BACKGROUNDS: readonly [
+    "canvas",
+    "surface",
+    "frosted",
+    "none"
+];
+export type TabsBarBackground = (typeof TABS_BAR_BACKGROUNDS)[number];
 declare const TABS_BAR_SIZES: readonly [
     "small",
     "medium"
 ];
 export type TabsBarSize = (typeof TABS_BAR_SIZES)[number];
+export type TabsBarUpdateEventDetail = {
+    activeTabIndex: number;
+};
 declare const TABS_BAR_WEIGHTS: readonly [
     "regular",
     "semi-bold"
 ];
+/** @deprecated */
 export type TabsBarWeight = (typeof TABS_BAR_WEIGHTS)[number];
-export type TabsBarUpdateEventDetail = {
-    activeTabIndex: number;
-};
 export type TagIcon = IconName | "none";
 declare const TAG_VARIANTS: readonly [
     "primary",