@porsche-design-system/components-react 3.27.0-rc.5 → 3.27.0

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

@@ -2349,18 +2349,18 @@ function getDynamicStyles(styles) {
 var index = createJss();
 
 var jss_esm = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  RuleList: RuleList,
-  SheetsManager: SheetsManager,
-  SheetsRegistry: SheetsRegistry,
-  create: createJss,
-  createGenerateId: createGenerateId,
-  createRule: createRule,
-  default: index,
-  getDynamicStyles: getDynamicStyles,
-  hasCSSTOMSupport: hasCSSTOMSupport,
-  sheets: sheets,
-  toCssValue: toCssValue
+    __proto__: null,
+    RuleList: RuleList,
+    SheetsManager: SheetsManager,
+    SheetsRegistry: SheetsRegistry,
+    create: createJss,
+    createGenerateId: createGenerateId,
+    createRule: createRule,
+    default: index,
+    getDynamicStyles: getDynamicStyles,
+    hasCSSTOMSupport: hasCSSTOMSupport,
+    sheets: sheets,
+    toCssValue: toCssValue
 });
 
 var at = '@global';
@@ -3185,9 +3185,6 @@ const getTagNameWithoutPrefix = (host) => {
     return (tagNameWithoutPrefix || tagName); // return tagName as fallback for default tags
 };
 
-// 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';
-
 /* eslint-disable prefer-arrow/prefer-arrow-functions */
 function getClosestHTMLElement(element, selector) {
     return element?.closest(selector);
@@ -3241,7 +3238,7 @@ const parseJSONAttribute = (attribute) => {
         .replace(/[\s"]?([\w-]+)[\s"]?:/g, '"$1":'));
 };
 
-const hasWindow = typeof window !== 'undefined';
+const hasWindow$1 = typeof window !== 'undefined';
 const parseAndGetAriaAttributes = (rawAttributes) => {
     if (rawAttributes) {
         return Object.fromEntries(Object.entries(parseJSONAttribute(rawAttributes)).map(([key, val]) => [
@@ -3252,7 +3249,7 @@ const parseAndGetAriaAttributes = (rawAttributes) => {
     }
     return undefined;
 };
-hasWindow && window.matchMedia?.('(forced-colors: active)').matches;
+hasWindow$1 && window.matchMedia?.('(forced-colors: active)').matches;
 
 const getButtonBaseAriaAttributes = (isDisabled, isLoading) => {
     return {
@@ -3388,7 +3385,7 @@ supportsConstructableStylesheets();
 })(); // determine it once
 
 const attributeMutationMap = new Map();
-hasWindow &&
+hasWindow$1 &&
     new MutationObserver((mutations) => {
         for (const mutation of mutations
             // reduce array to only entries that have really a changed value
@@ -3400,7 +3397,7 @@ hasWindow &&
     });
 
 const mediaQueries = Object.values(breakpoint).map((v) => `(min-width:${v}px)`);
-hasWindow && window.matchMedia ? mediaQueries.map(window.matchMedia) : [];
+hasWindow$1 && window.matchMedia ? mediaQueries.map(window.matchMedia) : [];
 
 Object.entries(breakpoint).reduce((result, [key, val]) => ({ ...result, [`${val}px`]: key }), {});
 
@@ -3415,7 +3412,7 @@ const observedNodesMap = new Map();
 /**
  * Mutation observer for observing changes in the children of observed nodes.
  */
-hasWindow &&
+hasWindow$1 &&
     new MutationObserver((mutations) => {
         // there may be race conditions in jsdom-polyfill tests  where the map is already empty when a mutation happens
         if (observedNodesMap.size > 0) {
@@ -3430,7 +3427,7 @@ hasWindow &&
     });
 
 const isTouchDevice = () => {
-    if (!hasWindow) {
+    if (!hasWindow$1) {
         return undefined;
     }
     return !!('ontouchstart' in window || window.navigator.maxTouchPoints > 0);
@@ -3465,6 +3462,9 @@ var MARQUES_MANIFEST = { "porscheMarqueTrademark": { "medium": { "1x": { "png":
 
 // index.ts
 var MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.493a9e3.svg", "width": 79, "height": 26 }, "911": { "src": "911.b68f913.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.c321738.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.2556201.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.cc89196.svg", "width": 229, "height": 35 }, "macan": { "src": "macan.a1844f4.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.6dae809.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.df444c6.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.73f1e10.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.6a4084a.svg", "width": 143, "height": 25 } };
+
+// 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);
 };
@@ -3533,7 +3533,7 @@ var unwrapErr = (result) => {
  * @returns {boolean} `true` if the native Popover API is supported, `false` otherwise.
  */
 const supportsNativePopover = () => {
-    if (!hasWindow) {
+    if (!hasWindow$1) {
         return false;
     }
     return Object.prototype.hasOwnProperty.call(HTMLElement.prototype, 'popover');
@@ -3543,6 +3543,22 @@ const hasNativePopoverSupport = supportsNativePopover();
 // getter for easy mocking
 const getHasNativePopoverSupport = () => hasNativePopoverSupport;
 
+/**
+ * Checks if the current environment supports the native CSS Anchor Positioning.
+ *
+ * @returns {boolean} `true` if native CSS Anchor Positioning is supported, `false` otherwise.
+ */
+const supportsNativeCSSAnchorPositioning = () => {
+    // SSR or older browsers
+    if (typeof CSS === 'undefined' || !CSS.supports)
+        return false;
+    return CSS.supports('(anchor-name: --test) and (position-anchor: --test) and (position-area: bottom) and (position-try-fallbacks: flip-block) and (width: anchor-size(width))');
+};
+// determine it once
+const hasNativeCSSAnchorPositioningSupport = supportsNativeCSSAnchorPositioning();
+// getter for easy mocking
+const getHasCSSAnchorPositioningSupport = () => hasNativeCSSAnchorPositioningSupport;
+
 const hasDocument = typeof document !== 'undefined';
 
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
@@ -3572,6 +3588,7 @@ const getButtonAriaAttributes = (isDisabled, isLoading, aria) => {
 };
 getMediaQueryMin('s');
 getMediaQueryMin('xxl');
+['auto', ...Array.from(new Array(10), (_, i) => i + 1)];
 // Infinite bullets will be shown if the total number of bullets is greater than this value
 const INFINITE_BULLET_THRESHOLD = 5;
 const isInfinitePagination = (amountOfPages) => {
@@ -3908,4 +3925,4 @@ const getTextTagType = (host, tag) => {
     return tag;
 };
 
-export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, ItemType, TEXT_TAGS, _hasShowPickerSupport, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, debounce, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHasNativePopoverSupport, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getListAriaAttributes, getOptionAriaAttributes, getRole, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getSelectedOptionString, getSelectedOptionValues, getSelectedOptions, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasLocateAction, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow, headerSlot, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isTouchDevice, isType, isUrl, isWithinForm, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateFlyoutMultiLevelItemState };
+export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, ItemType, TEXT_TAGS, _hasShowPickerSupport, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, debounce, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHasCSSAnchorPositioningSupport, getHasNativePopoverSupport, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getListAriaAttributes, getOptionAriaAttributes, getRole, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getSelectedOptionString, getSelectedOptionValues, getSelectedOptions, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTagName, getTagNameWithoutPrefix, getTextTagType, getTotalPages, hasDocument, hasLocateAction, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow$1 as hasWindow, headerSlot, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isElementOfKind, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isTouchDevice, isType, isUrl, isWithinForm, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativeCSSAnchorPositioning, supportsNativePopover, tempDiv, tempIcon, tempLabel, traverseTreeAndUpdateState, updateFlyoutMultiLevelItemState };

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

@@ -5,22 +5,22 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
 import { syncRef } from '../../utils.mjs';
 import { DSRCarousel } from '../dsr-components/carousel.mjs';
 
-const PCarousel = /*#__PURE__*/ forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', aria, description, disablePagination, focusOnCenterSlide = false, gradientColor = 'none', heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, trimSpace = true, width = 'basic', wrapContent, className, children, ...rest }, ref) => {
+const PCarousel = /*#__PURE__*/ forwardRef(({ activeSlideIndex = 0, alignControls = 'auto', alignHeader = 'start', aria, description, disablePagination, focusOnCenterSlide = false, gradientColor = 'none', heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, trimSpace = true, width = 'basic', wrapContent, className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-carousel');
-    const propsToSync = [activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || useTheme(), trimSpace, width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignControls, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || useTheme(), trimSpace, width, wrapContent];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeSlideIndex', 'alignHeader', 'aria', 'description', 'disablePagination', 'focusOnCenterSlide', 'gradientColor', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'trimSpace', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeSlideIndex', 'alignControls', 'alignHeader', 'aria', 'description', 'disablePagination', 'focusOnCenterSlide', 'gradientColor', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'trimSpace', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRCarousel, { activeSlideIndex, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme: theme || useTheme(), trimSpace, width, wrapContent, children })),
+                children: (jsx(DSRCarousel, { activeSlideIndex, alignControls, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme: theme || useTheme(), trimSpace, width, wrapContent, children })),
             }
             : {
                 children,

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

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

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

@@ -55,7 +55,7 @@ class DSRCarousel extends Component {
                 ? Object.fromEntries(Object.entries(this.props.disablePagination).map(([key, value]) => [key, !value]))
                 : !this.props.disablePagination
             : this.props.pagination, isInfinitePagination(this.props.focusOnCenterSlide ? this.slides.length : this.props.amountOfPages), (alignHeaderDeprecationMap[this.props.alignHeader] ||
-            this.props.alignHeader), this.props.theme, (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length))));
+            this.props.alignHeader), this.props.theme, (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length), this.props.alignControls)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "header", children: [hasHeadingPropOrSlot &&
                                             (this.props.heading ? (jsx("h2", { className: "heading", id: headingId, children: this.props.heading })) : (jsx("div", { className: "heading", id: headingId, children: jsx("slot", { name: "heading" }) }))), hasDescriptionPropOrSlot && (this.props.description ? jsx("p", { children: this.props.description }) : jsx("slot", { name: "description" })), hasControlsSlot && jsx("slot", { name: "controls" }), jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsx(PLinkPure, { href: this.props.skipLinkTarget, theme: this.props.theme, icon: "arrow-last", className: "btn skip-link", alignLabel: "start", hideLabel: true, children: "Skip carousel entries" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsx(PButtonPure, { ...btnProps, icon: "arrow-left" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsx(PButtonPure, { ...btnProps, icon: "arrow-right" }))] })] }), jsx("div", { id: "splide", className: "splide", ...parseAndGetAriaAttributes({
                                         'aria-labelledby': hasHeadingPropOrSlot && !this.props.aria ? headingId : undefined,

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

@@ -13,7 +13,7 @@ class DSRMultiSelectOption extends Component {
     host;
     render() {
         splitChildren(this.props.children);
-        const { theme = 'light', selected, highlighted, hidden, textContent } = this.props;
+        const { theme = 'light', selected, highlighted } = this.props;
         this.props.disabled || this.props.disabledParent;
         minifyCss(stripFocusAndHoverStyles(getComponentCss$D(theme)));
         return (jsx(Fragment, {}));

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

@@ -5,7 +5,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getMultiSelectCss as getComponentCss$C } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { getSelectedOptionValues, getSelectedOptions } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { getHasNativePopoverSupport, getHasCSSAnchorPositioningSupport, getSelectedOptionValues, getSelectedOptions } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
 import { Label } from './label.mjs';
 import { StateMessage } from './state-message.mjs';
@@ -30,13 +30,13 @@ class DSRMultiSelect extends Component {
     defaultValue;
     multiSelectOptions = [];
     multiSelectOptgroups = [];
-    inputContainer;
     inputElement;
-    listElement;
+    resetButtonElement;
     preventOptionUpdate = false; // Used to prevent value watcher from updating options when options are already updated
-    isNativePopoverCase = false;
-    parentTableElement;
     popoverElement;
+    hasNativePopoverSupport = getHasNativePopoverSupport();
+    hasNativeCSSAnchorPositioningSupport = getHasCSSAnchorPositioningSupport();
+    cleanUpAutoUpdate;
     get currentValue() {
         return getSelectedOptionValues(this.props.multiSelectOptions);
     }
@@ -56,17 +56,11 @@ class DSRMultiSelect extends Component {
     }
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
-        const optionsSelectedId = 'options-selected';
-        const dropdownId = 'list';
         const inputId = 'filter';
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$C('down', this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.isNativePopoverCase, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: inputId, isRequired: this.props.required, isDisabled: this.props.disabled }), this.props.currentValue && (jsxs("span", { id: optionsSelectedId, className: "sr-only", children: [getSelectedOptions(this.props.multiSelectOptions).length, " options selected"] })), jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsx("input", { id: inputId, role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, "aria-hidden": "true" }), this.props.currentValue && (jsx(PButtonPure, { type: "button", className: "button", icon: "close", hideLabel: true, theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsx("div", { ...(this.props.isNativePopoverCase && {
-                                                popover: 'auto',
-                                                className: 'popover',
-                                                ...(this.props.popoverElement?.matches(':popover-open') && {
-                                                    'popover-open': true,
-                                                }),
-                                            }), children: jsxs("div", { id: dropdownId, className: "listbox", children: [!this.props.hasFilterResults && (jsxs("div", { className: "no-results", role: "option", children: [jsx("span", { "aria-hidden": "true", children: "---" }), jsx("span", { className: "sr-only", children: "No results found" })] })), jsx("slot", {})] }) })] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsx("span", { className: "sr-only", role: "status", "aria-live": "assertive", "aria-relevant": "additions text", children: this.props.hasFilterResults ? this.props.srHighlightedOptionText : 'No results found' })] })] }), this.props.children] }));
+        const popoverId = 'list';
+        const optionsSelectedId = 'options-selected';
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$C(this.props.dropdownDirection, this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.hasNativeCSSAnchorPositioningSupport, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: inputId, isRequired: this.props.required, isDisabled: this.props.disabled }), this.props.currentValue && (jsxs("span", { id: optionsSelectedId, className: "sr-only", children: [getSelectedOptions(this.props.multiSelectOptions).length, " options selected"] })), jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsx("input", { id: inputId, role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, "aria-hidden": "true" }), this.props.currentValue && (jsx(PButtonPure, { type: "button", className: "button", icon: "close", hideLabel: true, theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsxs("div", { id: popoverId, popover: "manual", tabIndex: -1, children: [!this.props.hasFilterResults && (jsxs("div", { className: "no-results", role: "option", children: [jsx("span", { "aria-hidden": "true", children: "---" }), jsx("span", { className: "sr-only", children: "No results found" })] })), jsx("slot", {})] })] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsx("span", { className: "sr-only", role: "status", "aria-live": "assertive", "aria-relevant": "additions text", children: this.props.hasFilterResults ? this.props.srHighlightedOptionText : 'No results found' })] })] }), this.props.children] }));
     }
 }
 

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

@@ -3,7 +3,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getOptgroupCss as getComponentCss$A } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getOptgroupCss as getComponentCss$B } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
 /**
  * @slot {"name": "", "description": "Default slot for the optgroup content." }
@@ -13,11 +13,9 @@ class DSROptgroup extends Component {
     render() {
         splitChildren(this.props.children);
         const { theme = 'light', hidden } = this.props;
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$A(this.props.disabled, theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs("div", { role: "group", className: Object.entries({
-                                    optgroup: true,
-                                    'optgroup--disabled': this.props.disabled,
-                                }).map(([key, value]) => value && key).filter(Boolean).join(' '), "aria-disabled": this.props.disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, "aria-labelledby": "label", children: [jsx("span", { className: "label", role: "presentation", id: "label", children: this.props.label }), jsx("slot", {})] }) })] }), this.props.children] }));
+        const labelId = 'label';
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$B(this.props.disabled, theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs("div", { role: "group", "aria-disabled": this.props.disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, "aria-labelledby": labelId, children: [jsx("span", { id: labelId, role: "presentation", children: this.props.label }), jsx("slot", {})] }) })] }), this.props.children] }));
     }
 }
 

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

@@ -3,7 +3,7 @@ import { Component } from 'react';
 import '../../provider.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getPaginationCss as getComponentCss$z } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getPaginationCss as getComponentCss$A } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { getTotalPages, createPaginationItems, getCurrentActivePage, ItemType } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PIcon } from '../components/icon.wrapper.mjs';
 
@@ -19,7 +19,7 @@ class DSRPagination extends Component {
             pageTotal,
             showLastPage: this.props.showLastPage,
         });
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$z(this.props.activePage, pageTotal, this.props.showLastPage, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$A(this.props.activePage, pageTotal, this.props.showLastPage, this.props.theme)));
         return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("nav", { "aria-label": this.props.allyLabel || this.props.intl.root, children: jsx("ul", { children: paginationItems.map((pageModel, index) => {
                                 const { type, isActive, value, isBeforeCurrent, isAfterCurrent, isBeforeBeforeCurrent, isAfterAfterCurrent, } = pageModel;
                                 const spanProps = {

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

@@ -4,7 +4,7 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getPinCodeCss as getComponentCss$y } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getPinCodeCss as getComponentCss$z } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { isCurrentInput } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { LoadingMessage } from './loading-message.mjs';
 import { Label, labelId, descriptionId } from './label.mjs';
@@ -38,7 +38,7 @@ class DSRPinCode extends Component {
         // reset array of input elements
         this.inputElements = [];
         const currentInputId = 'current-input';
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$y(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.length, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$z(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.length, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: currentInputId, isRequired: this.props.required, isLoading: this.props.loading, isDisabled: this.props.disabled }), jsxs("div", { className: "wrapper", children: [Array.from(new Array(this.props.length), (_, index) => (jsx("input", { name: this.props.name, form: this.props.form, ...(isCurrentInput(index, this.props.value, this.props.length) && { id: currentInputId }), type: this.props.type === 'number' ? 'text' : this.props.type, "aria-label": `${index + 1}-${this.props.length}`, "aria-describedby": `${labelId} ${descriptionId} ${messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-disabled": this.props.loading ? 'true' : null, autoComplete: "one-time-code", pattern: "\\d*", inputMode: "numeric" // get numeric keyboard on mobile
                                             , defaultValue: this.props.value[index] === ' ' ? null : this.props.value[index], disabled: this.props.disabled, required: this.props.required }, index))), this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" }))] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
     }

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

@@ -4,7 +4,7 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getPopoverCss as getComponentCss$x } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getPopoverCss as getComponentCss$y } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { getHasNativePopoverSupport, parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PIcon } from '../components/icon.wrapper.mjs';
 
@@ -13,19 +13,19 @@ import { PIcon } from '../components/icon.wrapper.mjs';
  */
 class DSRPopover extends Component {
     host;
-    open = false;
+    isOpen = false;
     popover;
     button;
     arrow;
-    cleanUp;
+    cleanUpAutoUpdate;
     hasNativePopoverSupport = getHasNativePopoverSupport();
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$x(this.props.theme).replace(/(:host {[\S\s]+?})[\S\s]+(button {[\S\s]+?})[\S\s]+(.icon {[\S\s]+?})[\S\s]+(.label {[\S\s]+?})[\S\s]+/, '$1\n$2\n$3\n$4')));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$y(this.props.theme).replace(/(:host {[\S\s]+?})[\S\s]+(button {[\S\s]+?})[\S\s]+(.icon {[\S\s]+?})[\S\s]+(.label {[\S\s]+?})[\S\s]+/, '$1\n$2\n$3\n$4')));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("button", { type: "button", ...parseAndGetAriaAttributes({
                                         ...parseAndGetAriaAttributes(this.props.aria),
-                                        ...{ 'aria-expanded': this.props.open },
-                                    }), children: [jsx(PIcon, { className: "icon", name: "information", theme: this.props.theme }), jsx("span", { className: "label", children: "More information" })] }), this.props.open && (jsxs("div", { className: "popover", popover: "auto", children: [jsx("div", { className: "arrow" }), jsx("div", { className: "content", children: this.props.description ? jsx("p", { children: this.props.description }) : jsx("slot", {}) })] }))] })] }), this.props.children] }));
+                                        ...{ 'aria-expanded': this.props.isOpen },
+                                    }), children: [jsx(PIcon, { className: "icon", name: "information", theme: this.props.theme }), jsx("span", { className: "label", children: "More information" })] }), this.props.isOpen && (jsxs("div", { popover: "auto", children: [jsx("div", { className: "arrow" }), jsx("div", { className: "content", children: this.props.description ? jsx("p", { children: this.props.description }) : jsx("slot", {}) })] }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -4,7 +4,7 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getRadioButtonWrapperCss as getComponentCss$w } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getRadioButtonWrapperCss as getComponentCss$x } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { LoadingMessage } from './loading-message.mjs';
 import { Label } from './label.mjs';
 import { StateMessage } from './state-message.mjs';
@@ -23,7 +23,7 @@ class DSRRadioButtonWrapper extends Component {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const { disabled } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
         const isLoading = this.props.loading && !(typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && (otherChildren[0]?.props.checked || otherChildren[0]?.props.defaultChecked)); // spinner is only displayed when radio is not checked already
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$w(this.props.hideLabel, this.props.state, disabled, isLoading, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$x(this.props.hideLabel, this.props.state, disabled, isLoading, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, isLoading: isLoading, isDisabled: disabled, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), isLoading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" }))] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsx(LoadingMessage, { loading: isLoading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
     }
 }

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

@@ -4,7 +4,7 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getScrollerCss as getComponentCss$v } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getScrollerCss as getComponentCss$w } 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';
 
@@ -27,7 +27,7 @@ class DSRScroller extends Component {
             return (jsx("div", { className: direction === 'next' ? 'action-next' : 'action-prev', children: jsx(PButton, { className: "action-button", variant: "ghost", "hide-label": "true", icon: direction === 'next' ? 'arrow-head-right' : 'arrow-head-left', type: "button", tabIndex: -1, theme: this.props.theme, dir: "ltr" // Otherwise icon will be flipped which doesn't make sense in this use case
                     , children: direction }) }, direction));
         };
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$v(deprecationMap[this.props.gradientColorScheme] || this.props.gradientColor, this.isNextHidden, this.isPrevHidden, this.props.scrollIndicatorPosition || this.props.alignScrollIndicator, this.props.scrollbar, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$w(deprecationMap[this.props.gradientColorScheme] || this.props.gradientColor, this.isNextHidden, this.isPrevHidden, this.props.scrollIndicatorPosition || this.props.alignScrollIndicator, this.props.scrollbar, this.props.theme)));
         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] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/segmented-control-item.mjs

@@ -4,7 +4,7 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getSegmentedControlItemCss as getComponentCss$u } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getSegmentedControlItemCss as getComponentCss$v } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { getSegmentedControlItemAriaAttributes, getIconColor } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PIcon } from '../components/icon.wrapper.mjs';
 
@@ -19,7 +19,7 @@ class DSRSegmentedControlItem extends Component {
         const hasIcon = !!this.props.icon || !!this.props.iconSource;
         const hasSlottedContent = !!children.length;
         const isDisabled = this.props.disabled || this.props.disabledParent;
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$u(isDisabled, this.props.selected, hasIcon, hasSlottedContent, this.props.theme || 'light' // default as fallback
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$v(isDisabled, this.props.selected, hasIcon, hasSlottedContent, this.props.theme || 'light' // default as fallback
         )));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs("button", { type: "button", ...getSegmentedControlItemAriaAttributes(this.props.selected, this.props.disabled, this.props.aria), children: [this.props.label && jsx("span", { children: this.props.label }), hasIcon && (jsx(PIcon, { className: "icon", size: "inherit", name: this.props.icon, source: this.props.iconSource, color: getIconColor(this.props.disabled), theme: this.props.theme || 'light', "aria-hidden": "true" })), jsx("slot", {})] }) })] }), this.props.children] }));
     }

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

@@ -3,7 +3,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getSegmentedControlCss as getComponentCss$t } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getSegmentedControlCss as getComponentCss$u } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
 /**
  * @slot {"name": "", "description": "Default slot for the `p-segmented-control-item` tags." }
@@ -26,7 +26,7 @@ class DSRSegmentedControl extends Component {
         const manipulatedChildren = children.map((child) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
             ? { ...child, props: { ...child.props, selected: child.props?.value === this.props.value, backgroundColor: this.props.backgroundColor, theme: this.props.theme } }
             : child);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$t(100, this.props.columns)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$u(100, this.props.columns)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsx("slot", {}) })] }), manipulatedChildren] }));
     }
 }

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

@@ -4,7 +4,7 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getSelectOptionCss as getComponentCss$B } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getSelectOptionCss as getComponentCss$r } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { getOptionAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PIcon } from '../components/icon.wrapper.mjs';
 
@@ -17,7 +17,7 @@ class DSRSelectOption extends Component {
         splitChildren(this.props.children);
         const { theme = 'light', selected, highlighted, hidden } = this.props;
         const isDisabled = this.props.disabled || this.props.disabledParent;
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$B(theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$r(theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs("div", { role: "option", className: {
                                     option: true,
                                     'option--selected': selected,

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

@@ -3,32 +3,31 @@ import { Component } from 'react';
 import '../../provider.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getSelectWrapperDropdownCss as getComponentCss$s } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { getSelectedOptionMap } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { getSelectWrapperDropdownCss as getComponentCss$t } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getHasNativePopoverSupport, getHasCSSAnchorPositioningSupport, getSelectedOptionMap } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 class DSRSelectWrapperDropdown extends Component {
     host;
     isOpen = this.props.isOpenOverride;
     optionMaps = [];
     searchString = '';
-    inputElement;
-    listElement;
-    isNativePopoverCase = false;
-    parentTableElement;
+    inputOrButtonElement;
     popoverElement;
+    hasNativePopoverSupport = getHasNativePopoverSupport();
+    hasNativeCSSAnchorPositioningSupport = getHasCSSAnchorPositioningSupport();
+    cleanUpAutoUpdate;
     get selectedIndex() {
         return 0;
     }
     render() {
         // TODO: part won't be needed as soon as button/input of select-wrapper-dropdown is part of shadow dom of select-wrapper itself
         const part = 'select-wrapper-dropdown';
+        const inputId = 'filter';
         this.props.description && 'description';
         const buttonId = 'value';
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$s(this.props.direction === 'auto'
-            ? 'down'
-            : this.props.direction, this.isOpen, this.props.state, this.props.disabled, this.props.filter, this.props.isNativePopoverCase, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$t(this.props.direction, this.isOpen, this.props.state, this.props.disabled, this.props.filter, this.props.hasNativeCSSAnchorPositioningSupport, this.props.theme)));
         return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: this.props.filter ? ([
-                            jsx("input", { type: "text", role: "combobox", disabled: this.props.disabled, placeholder: getSelectedOptionMap(this.optionMaps)?.value || null, autoComplete: "off", defaultValue: this.searchString }, "input"),
+                            jsx("input", { id: inputId, type: "text", role: "combobox", disabled: this.props.disabled, placeholder: getSelectedOptionMap(this.optionMaps)?.value || null, autoComplete: "off", defaultValue: this.searchString }, "input"),
                             jsx("span", { 
                                 /* @ts-ignore */
                                 part: part }, "span"),

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

@@ -4,7 +4,7 @@ import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
-import { getSelectWrapperCss as getComponentCss$r } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getSelectWrapperCss as getComponentCss$s } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { isCustomDropdown } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { Label } from './label.mjs';
 import { StateMessage } from './state-message.mjs';
@@ -25,7 +25,7 @@ class DSRSelectWrapper extends Component {
         const hasCustomDropdown = isCustomDropdown(this.props.filter, this.props.native);
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const { disabled } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$r(disabled, hasCustomDropdown, this.props.hideLabel, this.props.state, this.props.theme)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$s(disabled, hasCustomDropdown, this.props.hideLabel, this.props.state, this.props.theme)));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, isDisabled: disabled, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" }), hasCustomDropdown && !disabled && (jsx(PSelectWrapperDropdown, { className: "dropdown", selectRef: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props, label: this.props.label || namedSlotChildren.find(({ props: { slot } }) => slot === 'label')?.props.children, message: this.props.message || namedSlotChildren.find(({ props: { slot } }) => slot === 'message')?.props.children, description: this.props.description || namedSlotChildren.find(({ props: { slot } }) => slot === 'description')?.props.children, state: this.props.state, direction: this.props.dropdownDirection, filter: this.props.filter, theme: this.props.theme, required: false, disabled: disabled, onOpenChange: (isOpen) => this.props.iconElement.classList.toggle('icon--open', isOpen) }))] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null })] })] }), this.props.children] }));
     }
 }