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

package/ssr/esm/components/dist/utils/esm/utils-entry.mjs

@@ -3240,8 +3240,6 @@ const parseJSONAttribute = (attribute) => {
         // Convert tmp colon to real colon after all other replacements
         .replace(/__tmp-colon__/g, ':'));
 };
-
-const hasWindow$1 = typeof window !== 'undefined';
 const parseAndGetAriaAttributes = (rawAttributes) => {
     if (rawAttributes) {
         return Object.fromEntries(Object.entries(parseJSONAttribute(rawAttributes)).map(([key, val]) => [
@@ -3252,7 +3250,6 @@ const parseAndGetAriaAttributes = (rawAttributes) => {
     }
     return undefined;
 };
-hasWindow$1 && window.matchMedia?.('(forced-colors: active)').matches;
 
 const getButtonBaseAriaAttributes = (isDisabled, isLoading) => {
     return {
@@ -3397,6 +3394,8 @@ supportsConstructableStylesheets();
     }
 })(); // determine it once
 
+const hasWindow$1 = typeof window !== 'undefined';
+
 const attributeMutationMap = new Map();
 hasWindow$1 &&
     new MutationObserver((mutations) => {
@@ -3447,18 +3446,12 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"4.0.0-beta.1"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"4.0.0-beta.2"}]` // this part isn't covered by unit tests
     ;
 const consoleError$1 = (...messages) => {
     console.error(prefix, ...messages);
 };
 
-// This class is shared since the popover needs to register a scroll listener to this node in order to hide the popover when the table is scrolled
-const scrollAreaClass = 'scroll-area';
-const isScrollable = (isPrevHidden, isNextHidden) => {
-    return !(isPrevHidden && isNextHidden);
-};
-
 /**
  * Checks if the current environment supports the native Popover API.
  *
@@ -3964,4 +3957,4 @@ const getTextTagType = (host, tag) => {
     return tag;
 };
 
-export { DISPLAY_TAGS, HEADING_TAGS, ItemType, TEXT_TAGS, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildFlagUrl, buildIconUrl, consoleError$1 as consoleError, createPaginationItems, createRange, crestSize, descriptionId, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getFieldsetAriaAttributes, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getInlineNotificationIconName, getSegmentedControlItemAriaAttributes, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasShowPickerSupport, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, internalDrilldown, isCurrentInput, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isUrl, labelId, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateDrilldownItemState };
+export { DISPLAY_TAGS, HEADING_TAGS, ItemType, TEXT_TAGS, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildFlagUrl, buildIconUrl, consoleError$1 as consoleError, createPaginationItems, createRange, crestSize, descriptionId, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getFieldsetAriaAttributes, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getInlineNotificationIconName, getSegmentedControlItemAriaAttributes, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasShowPickerSupport, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, internalDrilldown, isCurrentInput, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isSortable, isStateCompleteOrWarning, isUrl, labelId, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateDrilldownItemState };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/scroller.wrapper.mjs

@@ -5,20 +5,20 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 import { DSRScroller } from '../dsr-components/scroller.mjs';
 
-const PScroller = /*#__PURE__*/ forwardRef(({ alignScrollIndicator = 'center', aria, scrollToPosition, scrollbar = false, className, children, ...rest }, ref) => {
+const PScroller = /*#__PURE__*/ forwardRef(({ alignScrollIndicator = 'center', aria, compact, scrollToPosition, scrollbar = false, sticky = false, className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-scroller');
-    const propsToSync = [alignScrollIndicator, aria, scrollToPosition, scrollbar];
+    const propsToSync = [alignScrollIndicator, aria, compact, scrollToPosition, scrollbar, sticky];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['alignScrollIndicator', 'aria', 'scrollToPosition', 'scrollbar'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignScrollIndicator', 'aria', 'compact', 'scrollToPosition', 'scrollbar', 'sticky'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRScroller, { alignScrollIndicator, aria, scrollToPosition, scrollbar, children })),
+                children: (jsx(DSRScroller, { alignScrollIndicator, aria, compact, scrollToPosition, scrollbar, sticky, children })),
             }
             : {
                 children,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/table.wrapper.mjs

@@ -5,21 +5,21 @@ import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } f
 import { syncRef } from '../../utils.mjs';
 import { DSRTable } from '../dsr-components/table.mjs';
 
-const PTable = /*#__PURE__*/ forwardRef(({ caption, compact = false, layout = 'auto', onUpdate, className, children, ...rest }, ref) => {
+const PTable = /*#__PURE__*/ forwardRef(({ caption, compact = false, layout = 'auto', onUpdate, sticky = false, className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-table');
-    const propsToSync = [caption, compact, layout];
+    const propsToSync = [caption, compact, layout, sticky];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['caption', 'compact', 'layout'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['caption', 'compact', 'layout', 'sticky'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRTable, { caption, compact, layout, children })),
+                children: (jsx(DSRTable, { caption, compact, layout, sticky, children })),
             }
             : {
                 children,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/tabs-bar.wrapper.mjs

@@ -5,21 +5,21 @@ import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } f
 import { syncRef } from '../../utils.mjs';
 import { DSRTabsBar } from '../dsr-components/tabs-bar.mjs';
 
-const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, onUpdate, size = 'small', weight = 'regular', className, children, ...rest }, ref) => {
+const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-tabs-bar');
-    const propsToSync = [activeTabIndex, size, weight];
+    const propsToSync = [activeTabIndex, background, compact, size, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeTabIndex', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeTabIndex', 'background', 'compact', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRTabsBar, { activeTabIndex, size, weight, children })),
+                children: (jsx(DSRTabsBar, { activeTabIndex, background, compact, size, weight, children })),
             }
             : {
                 children,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/tabs.wrapper.mjs

@@ -5,21 +5,21 @@ import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } f
 import { syncRef } from '../../utils.mjs';
 import { DSRTabs } from '../dsr-components/tabs.mjs';
 
-const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, onUpdate, size = 'small', weight = 'regular', className, children, ...rest }, ref) => {
+const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-tabs');
-    const propsToSync = [activeTabIndex, size, weight];
+    const propsToSync = [activeTabIndex, background, compact, size, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeTabIndex', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeTabIndex', 'background', 'compact', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRTabs, { activeTabIndex, size, weight, children })),
+                children: (jsx(DSRTabs, { activeTabIndex, background, compact, size, weight, children })),
             }
             : {
                 children,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/scroller.mjs

@@ -1,29 +1,25 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Component } from 'react';
-import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
+import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { getScrollerCss as getComponentCss$s } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { scrollAreaClass, parseAndGetAriaAttributes, isScrollable } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
-import { PButton } from '../components/button.wrapper.mjs';
+import { parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 /**
  * @slot {"name": "", "description": "Default slot for the scroller content." }
  */
 class DSRScroller extends Component {
     host;
-    isPrevHidden = true;
-    isNextHidden = true;
+    isIndicatorPrevVisible = false;
+    isIndicatorNextVisible = false;
     intersectionObserver;
-    scrollAreaElement;
+    scrollArea;
+    sentinelLeft;
+    sentinelRight;
     render() {
         splitChildren(this.props.children);
-        const renderPrevNextButton = (direction) => {
-            return (jsx("div", { className: direction === 'next' ? 'action-next' : 'action-prev', children: jsx(PButton, { className: "action-button", variant: "secondary", "hide-label": "true", icon: direction === 'next' ? 'arrow-head-right' : 'arrow-head-left', type: "button", tabIndex: -1, dir: "ltr" // Otherwise icon will be flipped which doesn't make sense in this use case
-                    , children: direction }) }, direction));
-        };
-        const style = minifyCss(getComponentCss$s(this.isNextHidden, this.isPrevHidden, this.props.alignScrollIndicator, this.props.scrollbar));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("div", { className: scrollAreaClass, children: jsxs("div", { className: "scroll-wrapper", role: parseAndGetAriaAttributes(this.props.aria)?.role || null, tabIndex: isScrollable(this.isPrevHidden, this.isNextHidden) ? 0 : null, children: [jsx("slot", {}), jsx("div", { className: "trigger" }), jsx("div", { className: "trigger" })] }) }), ['prev', 'next'].map(renderPrevNextButton)] })] }), this.props.children] }));
+        const style = minifyCss(getComponentCss$s(this.props.isIndicatorPrevVisible, this.props.isIndicatorNextVisible, this.props.sticky, this.props.scrollbar, this.props.compact));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("span", { className: "prev" }), jsx("span", { className: "next" }), jsxs("div", { className: "scroll", role: parseAndGetAriaAttributes(this.props.aria)?.role || null, tabIndex: this.props.isIndicatorPrevVisible || this.props.isIndicatorNextVisible ? 0 : null, children: [jsx("span", { className: "sentinel" }), jsx("slot", {}), jsx("span", { className: "sentinel" })] })] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-option.mjs

@@ -15,7 +15,7 @@ class DSRSelectOption extends Component {
         splitChildren(this.props.children);
         const { selected: isSelected, highlighted, hidden } = this.props;
         const isDisabled = this.props.disabled || this.props.disabledParent;
-        const style = minifyCss(getComponentCss$p(this.props.disabled));
+        const style = minifyCss(getComponentCss$p(isDisabled));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } })
                         // TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
                         , "// TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259", jsx(Fragment, { children: jsxs("div", { className: Object.entries({

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal.mjs

@@ -11,9 +11,10 @@ import { PScroller } from '../components/scroller.wrapper.mjs';
  */
 class DSRStepperHorizontal extends Component {
     host;
+    scroller;
     stepperHorizontalItems = [];
-    scrollerElement;
-    currentStepIndex;
+    slot;
+    resizeObserver;
     render() {
         const { children, otherChildren } = splitChildren(this.props.children);
         const manipulatedChildren = children.map((child) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table.mjs

@@ -20,7 +20,7 @@ class DSRTable extends Component {
             ? { 'aria-label': this.props.caption }
             : hasSlottedCaption && { 'aria-labelledby': captionId };
         const style = minifyCss(getComponentCss$h(this.props.compact, this.props.layout));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [hasSlottedCaption && (jsx("div", { id: captionId, className: "caption", children: jsx("slot", { name: "caption" }) })), jsx(PScroller, { scrollbar: true, children: jsx("div", { className: "table", role: "table", ...tableAttr, children: jsx("slot", {}) }) })] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [hasSlottedCaption && (jsx("div", { id: captionId, className: "caption", children: jsx("slot", { name: "caption" }) })), jsx(PScroller, { scrollbar: true, compact: this.props.compact, sticky: this.props.sticky, children: jsx("div", { className: "table", role: "table", ...tableAttr, children: jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs-bar.mjs

@@ -13,13 +13,13 @@ import { PScroller } from '../components/scroller.wrapper.mjs';
  */
 class DSRTabsBar extends Component {
     host;
-    tabElements = [];
-    internalTabIndex = this.props.activeTabIndex; // to not override and mutate external prop value
-    barElement;
-    scrollerElement;
-    direction = 'next';
+    tabs = [];
+    bar;
+    scroller;
+    slot;
     hasPTabsParent;
-    areTabsButtons;
+    isTabList;
+    resizeObserver;
     render() {
         const { children, otherChildren } = splitChildren(this.props.children);
         const manipulatedChildren = children.map((child, i) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
@@ -43,8 +43,8 @@ class DSRTabsBar extends Component {
                     }
                     : child
             : child);
-        const style = minifyCss(getComponentCss$b(this.props.size, this.props.weight));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(PScroller, { className: "scroller", ...(this.props.areTabsButtons && { aria: { role: 'tablist' } }), alignScrollIndicator: "top", children: [jsx("slot", {}), jsx("span", { className: "bar" })] })] }), manipulatedChildren] }));
+        const style = minifyCss(getComponentCss$b(this.props.background, this.props.size, this.props.compact));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(PScroller, { className: "scroller", compact: this.props.compact, ...(this.props.isTabList && { aria: { role: 'tablist' } }), children: [jsx("slot", {}), jsx("span", { className: "bar" })] })] }), manipulatedChildren] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs.mjs

@@ -13,14 +13,15 @@ import { PTabsBar } from '../components/tabs-bar.wrapper.mjs';
  */
 class DSRTabs extends Component {
     host;
-    tabsItemElements = [];
+    tabsItems = [];
+    slot;
     render() {
         const { children, otherChildren } = splitChildren(this.props.children);
         const manipulatedChildren = children.map((child, i) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
             ? { ...child, props: { ...child.props, theme: this.props.theme, hidden: this.props.activeTabIndex !== i ? true : null } }
             : child);
         const style = minifyCss(getComponentCss$9());
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(PTabsBar, { className: "root", size: this.props.size, weight: this.props.weight, activeTabIndex: this.props.activeTabIndex, children: otherChildren.map((tab, index) => (jsx("button", { type: "button", children: typeof tab === 'object' && 'props' in tab && tab.props.label }, index))) }), jsx("slot", {})] })] }), manipulatedChildren] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(PTabsBar, { className: "root", size: this.props.size, background: this.props.background, compact: this.props.compact, activeTabIndex: this.props.activeTabIndex, children: otherChildren.map((tab, index) => (jsx("button", { type: "button", children: typeof tab === 'object' && 'props' in tab && tab.props.label }, index))) }), jsx("slot", {})] })] }), manipulatedChildren] }));
     }
 }
 

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