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

package/CHANGELOG.md

@@ -14,16 +14,18 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
-### [3.27.0] - 2025-02-28
-
-### [3.27.0-rc.6] - 2025-02-28
+### [3.27.1-rc.0] - 2025-03-05
 
-#### Changed
+#### Fixed
 
-- `Carousel`: Center layout of Carousel on mobile view
-  ([#3765](https://github.com/porsche-design-system/porsche-design-system/pull/3765))
 - `Carousel`: `auto` value of `slides-per-page` prop is breakpoint customizable
-  ([#3767](https://github.com/porsche-design-system/porsche-design-system/pull/3767))
+  ([#3783](https://github.com/porsche-design-system/porsche-design-system/pull/3783))
+- `Select`, `Multi Select`, `Select Wrapper`: remove positioning with native anchor positioning due to a Chrome bug
+  ([#3780](https://github.com/porsche-design-system/porsche-design-system/pull/3780))
+
+### [3.27.0] - 2025-02-28
+
+### [3.27.0-rc.6] - 2025-02-28
 
 #### Added
 
@@ -47,6 +49,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 - `Select`, `Select Wrapper`:
   - focus outline becomes default focus style when no filter is used
     ([#3754](https://github.com/porsche-design-system/porsche-design-system/pull/3754))
+- `Carousel`: Center layout of Carousel on mobile view
+  ([#3765](https://github.com/porsche-design-system/porsche-design-system/pull/3765))
+- `Carousel`: `auto` value of `slides-per-page` prop is breakpoint customizable
+  ([#3771](https://github.com/porsche-design-system/porsche-design-system/pull/3771))
 
 ### [3.27.0-rc.5] - 2025-02-20
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.27.0",
+  "version": "3.27.1-rc.0",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.27.0"
+    "@porsche-design-system/components-js": "3.27.1-rc.0"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 33.0.0 <34.0.0",

package/ssr/cjs/components/dist/styles/esm/styles-entry.cjs

@@ -3906,22 +3906,6 @@ const supportsNativePopover = () => {
 // determine it once
 supportsNativePopover();
 
-/**
- * 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 isThemeAuto = (theme) => {
@@ -8207,7 +8191,7 @@ const getUnitCounterJssStyle = (isDisabled, isReadonly, theme) => {
     };
 };
 
-const getButtonJssStyle = (componentName, isOpen, isDisabled, state, hasSlottedImage, anchorName, cssVarScaling, theme) => {
+const getButtonJssStyle = (componentName, isOpen, isDisabled, state, hasSlottedImage, cssVarScaling, theme) => {
     const cssVarBackgroundColor = `--p-${componentName}-background-color`;
     const cssVarTextColor = `--p-${componentName}-text-color`;
     const cssVarBorderColor = `--p-${componentName}-border-color`;
@@ -8217,9 +8201,6 @@ const getButtonJssStyle = (componentName, isOpen, isDisabled, state, hasSlottedI
     const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
     return {
         all: 'unset',
-        ...(getHasCSSAnchorPositioningSupport() && {
-            anchorName,
-        }),
         display: 'grid',
         gridTemplateColumns: `${hasSlottedImage ? 'auto ' : ''}minmax(0, 1fr) auto`,
         alignItems: 'center',
@@ -8379,7 +8360,7 @@ const getPopoverKeyframesStyles = {
         },
     },
 };
-const getPopoverJssStyle = (isOpen, direction, anchorName, cssVarScaling, // "1" is needed for components not yet supporting compact mode
+const getPopoverJssStyle = (isOpen, cssVarScaling, // "1" is needed for components not yet supporting compact mode
 optionHeight, theme) => {
     const { contrastLowColor, backgroundColor, backgroundSurfaceColor } = getThemedColors(theme);
     const { contrastLowColor: contrastLowColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark } = getThemedColors('dark');
@@ -8406,16 +8387,6 @@ optionHeight, theme) => {
             background: backgroundSurfaceColorDark,
             borderColor: contrastLowColorDark,
         }),
-        ...(getHasCSSAnchorPositioningSupport() && {
-            positionAnchor: anchorName,
-            positionVisibility: 'always',
-            positionTryOrder: 'normal',
-            positionArea: direction === 'up' ? 'top' : 'bottom',
-            positionTryFallbacks: 'flip-block',
-            width: 'anchor-size(width)',
-            maxHeight: `max(${minHeightOptionList}, calc(50vh - anchor-size(height) / 2 - ${OPTION_LIST_SAFE_ZONE}px * 2))`,
-            margin: `${OPTION_LIST_SAFE_ZONE}px 0`,
-        }),
         '&:not(:popover-open)': {
             display: 'none',
         },
@@ -8454,8 +8425,7 @@ const getPlaceholderJssStyle = (styles) => ({
     '&:-moz-placeholder': styles /* Firefox 18- */,
 });
 
-const anchorName$2 = '--anchor-multi-select';
-const getComponentCss$C = (direction, isOpen, isDisabled, hideLabel, state, hasNativeCSSAnchorPositioningSupport, theme) => {
+const getComponentCss$C = (isOpen, isDisabled, hideLabel, state, theme) => {
     const { primaryColor, disabledColor, contrastHighColor, contrastMediumColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, backgroundColor: backgroundColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
@@ -8533,11 +8503,8 @@ const getComponentCss$C = (direction, isOpen, isDisabled, hideLabel, state, hasN
                         WebkitTextFillColor: disabledColorDark,
                     }),
                 }),
-                ...(hasNativeCSSAnchorPositioningSupport && {
-                    anchorName: anchorName$2,
-                }),
             },
-            '[popover]': getPopoverJssStyle(isOpen, direction, anchorName$2, 1, 44, theme),
+            '[popover]': getPopoverJssStyle(isOpen, 1, 44, theme),
         },
         root: {
             display: 'grid',
@@ -9283,8 +9250,7 @@ const getComponentCss$u = (maxWidth, columns) => {
     });
 };
 
-const anchorName$1 = '--anchor-select-wrapper';
-const getButtonStyles = (isOpen, state, hasNativeCSSAnchorPositioningSupport, theme) => {
+const getButtonStyles = (isOpen, state, theme) => {
     const { primaryColor, disabledColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, contrastMediumColor: contrastMediumColorDark, } = getThemedColors('dark');
     const { formStateHoverColor, formStateColor } = getThemedFormStateColors(theme, state);
@@ -9293,9 +9259,6 @@ const getButtonStyles = (isOpen, state, hasNativeCSSAnchorPositioningSupport, th
         '@global': {
             // TODO: extract generic default button/anchor reset style
             button: {
-                ...(hasNativeCSSAnchorPositioningSupport && {
-                    anchorName: anchorName$1,
-                }),
                 position: 'absolute',
                 inset: 0,
                 width: '100%', // fixes Firefox positioning issue
@@ -9331,7 +9294,7 @@ const getButtonStyles = (isOpen, state, hasNativeCSSAnchorPositioningSupport, th
         },
     };
 };
-const getFilterStyles = (isOpen, state, disabled, hasNativeCSSAnchorPositioningSupport, theme) => {
+const getFilterStyles = (isOpen, state, disabled, theme) => {
     const { primaryColor, backgroundColor, disabledColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, disabledColor: disabledColorDark, contrastMediumColor: contrastMediumColorDark, } = getThemedColors('dark');
     const { formStateHoverColor, formStateColor } = getThemedFormStateColors(theme, state);
@@ -9375,9 +9338,6 @@ const getFilterStyles = (isOpen, state, disabled, hasNativeCSSAnchorPositioningS
                     color: primaryColorDark,
                     background: backgroundColorDark,
                 }),
-                ...(hasNativeCSSAnchorPositioningSupport && {
-                    anchorName: anchorName$1,
-                }),
                 '&::placeholder': {
                     ...placeHolderJssStyle,
                     ...prefersColorSchemeDarkMediaQuery(theme, placeHolderDarkJssStyle),
@@ -9435,14 +9395,14 @@ const getFilterStyles = (isOpen, state, disabled, hasNativeCSSAnchorPositioningS
         },
     };
 };
-const getListStyles = (direction, isOpen, theme) => {
+const getListStyles = (isOpen, theme) => {
     const { primaryColor, disabledColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark } = getThemedColors('dark');
     return {
         '@global': {
             // @keyframes fade-in
             ...getPopoverKeyframesStyles,
-            '[popover]': getPopoverJssStyle(isOpen, direction, anchorName$1, 1, 40, theme),
+            '[popover]': getPopoverJssStyle(isOpen, 1, 40, theme),
         },
         option: {
             ...getOptionJssStyle('select-wrapper', 1, theme),
@@ -9474,7 +9434,7 @@ const getListStyles = (direction, isOpen, theme) => {
         },
     };
 };
-const getComponentCss$t = (direction, isOpen, state, disabled, filter, hasNativeCSSAnchorPositioningSupport, theme) => {
+const getComponentCss$t = (isOpen, state, disabled, filter, theme) => {
     return getCss(
     // merge because of global styles
     mergeDeep({
@@ -9488,9 +9448,7 @@ const getComponentCss$t = (direction, isOpen, state, disabled, filter, hasNative
         'sr-text': {
             display: 'none',
         },
-    }, filter
-        ? getFilterStyles(isOpen, state, disabled, hasNativeCSSAnchorPositioningSupport, theme)
-        : getButtonStyles(isOpen, state, hasNativeCSSAnchorPositioningSupport, theme), getListStyles(direction, isOpen, theme)));
+    }, filter ? getFilterStyles(isOpen, state, disabled, theme) : getButtonStyles(isOpen, state, theme), getListStyles(isOpen, theme)));
 };
 
 const getComponentCss$s = (isDisabled, hasCustomDropdown, hideLabel, state, theme) => {
@@ -9575,8 +9533,7 @@ const getComponentCss$r = (theme) => {
 };
 
 const cssVarInternalSelectScaling = '--p-internal-select-scaling';
-const anchorName = '--anchor-select';
-const getComponentCss$q = (direction, isOpen, isDisabled, hideLabel, state, compact, theme, hasSlottedImage) => {
+const getComponentCss$q = (isOpen, isDisabled, hideLabel, state, compact, theme, hasSlottedImage) => {
     const scalingVar = `var(${cssVarInternalSelectScaling}, ${compact ? 0.5 : 1})`;
     return getCss({
         '@global': {
@@ -9595,11 +9552,11 @@ const getComponentCss$q = (direction, isOpen, isDisabled, hideLabel, state, comp
             }),
             ...preventFoucOfNestedElementsStyles,
             button: {
-                ...getButtonJssStyle('select', isOpen, isDisabled, state, hasSlottedImage, anchorName, scalingVar, theme),
+                ...getButtonJssStyle('select', isOpen, isDisabled, state, hasSlottedImage, scalingVar, theme),
                 '& img': getButtonImageJssStyle,
                 '& span': getButtonLabelJssStyle,
             },
-            '[popover]': getPopoverJssStyle(isOpen, direction, anchorName, scalingVar, 40, theme),
+            '[popover]': getPopoverJssStyle(isOpen, scalingVar, 40, theme),
         },
         root: {
             display: 'grid',

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

@@ -3545,22 +3545,6 @@ 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'];
@@ -3955,7 +3939,6 @@ exports.getCurrentActivePage = getCurrentActivePage;
 exports.getDirectChildHTMLElement = getDirectChildHTMLElement;
 exports.getDisplayTagType = getDisplayTagType;
 exports.getHTMLElement = getHTMLElement;
-exports.getHasCSSAnchorPositioningSupport = getHasCSSAnchorPositioningSupport;
 exports.getHasNativePopoverSupport = getHasNativePopoverSupport;
 exports.getHeadingTagType = getHeadingTagType;
 exports.getHeadlineTagType = getHeadlineTagType;
@@ -4002,7 +3985,6 @@ exports.parseJSONAttribute = parseJSONAttribute;
 exports.scrollAreaClass = scrollAreaClass;
 exports.showCustomCalendarOrTimeIndicator = showCustomCalendarOrTimeIndicator;
 exports.supportsConstructableStylesheets = supportsConstructableStylesheets;
-exports.supportsNativeCSSAnchorPositioning = supportsNativeCSSAnchorPositioning;
 exports.supportsNativePopover = supportsNativePopover;
 exports.tempDiv = tempDiv;
 exports.tempIcon = tempIcon;

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

@@ -37,7 +37,6 @@ class DSRMultiSelect extends react.Component {
     preventOptionUpdate = false; // Used to prevent value watcher from updating options when options are already updated
     popoverElement;
     hasNativePopoverSupport = utilsEntry.getHasNativePopoverSupport();
-    hasNativeCSSAnchorPositioningSupport = utilsEntry.getHasCSSAnchorPositioningSupport();
     cleanUpAutoUpdate;
     get currentValue() {
         return utilsEntry.getSelectedOptionValues(this.props.multiSelectOptions);
@@ -61,7 +60,7 @@ class DSRMultiSelect extends react.Component {
         const inputId = 'filter';
         const popoverId = 'list';
         const optionsSelectedId = 'options-selected';
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getMultiSelectCss(this.props.dropdownDirection, this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.hasNativeCSSAnchorPositioningSupport, this.props.theme)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getMultiSelectCss(this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.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 && (jsxRuntime.jsxs("span", { id: optionsSelectedId, className: "sr-only", children: [utilsEntry.getSelectedOptions(this.props.multiSelectOptions).length, " options selected"] })), jsxRuntime.jsxs("div", { className: `wrapper${this.props.disabled ? ' disabled' : ''}`, children: [jsxRuntime.jsx("input", { id: inputId, role: "combobox", autoComplete: "off", disabled: this.props.disabled, required: this.props.required, "aria-invalid": this.props.state === 'error' ? 'true' : null }), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, "aria-hidden": "true" }), this.props.currentValue && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { type: "button", className: "button", icon: "close", hideLabel: true, theme: this.props.theme, disabled: this.props.disabled, children: "Reset selection" })), jsxRuntime.jsxs("div", { id: popoverId, popover: "manual", tabIndex: -1, children: [!this.props.hasFilterResults && (jsxRuntime.jsxs("div", { className: "no-results", role: "option", children: [jsxRuntime.jsx("span", { "aria-hidden": "true", children: "---" }), jsxRuntime.jsx("span", { className: "sr-only", children: "No results found" })] })), jsxRuntime.jsx("slot", {})] })] }), jsxRuntime.jsx(stateMessage.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 }), jsxRuntime.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/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-wrapper-dropdown.cjs

@@ -16,7 +16,6 @@ class DSRSelectWrapperDropdown extends react.Component {
     inputOrButtonElement;
     popoverElement;
     hasNativePopoverSupport = utilsEntry.getHasNativePopoverSupport();
-    hasNativeCSSAnchorPositioningSupport = utilsEntry.getHasCSSAnchorPositioningSupport();
     cleanUpAutoUpdate;
     get selectedIndex() {
         return 0;
@@ -27,7 +26,7 @@ class DSRSelectWrapperDropdown extends react.Component {
         const inputId = 'filter';
         this.props.description && 'description';
         const buttonId = 'value';
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectWrapperDropdownCss(this.props.direction, this.isOpen, this.props.state, this.props.disabled, this.props.filter, this.props.hasNativeCSSAnchorPositioningSupport, this.props.theme)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectWrapperDropdownCss(this.isOpen, this.props.state, this.props.disabled, this.props.filter, this.props.theme)));
         return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: this.props.filter ? ([
                             jsxRuntime.jsx("input", { id: inputId, type: "text", role: "combobox", disabled: this.props.disabled, placeholder: utilsEntry.getSelectedOptionMap(this.optionMaps)?.value || null, autoComplete: "off", defaultValue: this.searchString }, "input"),
                             jsxRuntime.jsx("span", { 

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

@@ -37,7 +37,6 @@ class DSRSelect extends react.Component {
     searchTimeout = null;
     slottedImagePath = '';
     hasNativePopoverSupport = utilsEntry.getHasNativePopoverSupport();
-    hasNativeCSSAnchorPositioningSupport = utilsEntry.getHasCSSAnchorPositioningSupport();
     cleanUpAutoUpdate;
     formDisabledCallback() {
     }
@@ -55,7 +54,7 @@ class DSRSelect extends react.Component {
         const initialStatusId = 'initial-status';
         const ariaDescribedBy = [descriptionId, selectMessageId, initialStatusId].filter(Boolean).join(' ');
         const selectedOption = utilsEntry.getSelectedOptionString(otherChildren);
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectCss(this.props.dropdownDirection, this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.compact, this.props.theme, !!this.props.slottedImagePath)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSelectCss(this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.compact, this.props.theme, !!this.props.slottedImagePath)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.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: buttonId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxRuntime.jsxs("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, ...utilsEntry.getComboboxAriaAttributes(this.props.isOpen, this.props.required, label.labelId, ariaDescribedBy, popoverId), disabled: this.props.disabled, children: [this.props.slottedImagePath && jsxRuntime.jsx("img", { src: this.props.slottedImagePath, alt: "" }), jsxRuntime.jsx("span", { children: selectedOption }), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: this.props.disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" })] }), jsxRuntime.jsx("div", { id: popoverId, popover: "manual", tabIndex: -1, ...utilsEntry.getListAriaAttributes(this.props.label, this.props.required, false, this.props.isOpen), children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsx(stateMessage.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 }), jsxRuntime.jsx("span", { className: "sr-only", role: "status", "aria-live": "assertive", "aria-relevant": "additions text", children: this.props.srHighlightedOptionText })] })] }), this.props.children] }));
     }
     getSelectedOptionImagePath = (options) => {

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

@@ -3904,22 +3904,6 @@ const supportsNativePopover = () => {
 // determine it once
 supportsNativePopover();
 
-/**
- * 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 isThemeAuto = (theme) => {
@@ -8205,7 +8189,7 @@ const getUnitCounterJssStyle = (isDisabled, isReadonly, theme) => {
     };
 };
 
-const getButtonJssStyle = (componentName, isOpen, isDisabled, state, hasSlottedImage, anchorName, cssVarScaling, theme) => {
+const getButtonJssStyle = (componentName, isOpen, isDisabled, state, hasSlottedImage, cssVarScaling, theme) => {
     const cssVarBackgroundColor = `--p-${componentName}-background-color`;
     const cssVarTextColor = `--p-${componentName}-text-color`;
     const cssVarBorderColor = `--p-${componentName}-border-color`;
@@ -8215,9 +8199,6 @@ const getButtonJssStyle = (componentName, isOpen, isDisabled, state, hasSlottedI
     const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
     return {
         all: 'unset',
-        ...(getHasCSSAnchorPositioningSupport() && {
-            anchorName,
-        }),
         display: 'grid',
         gridTemplateColumns: `${hasSlottedImage ? 'auto ' : ''}minmax(0, 1fr) auto`,
         alignItems: 'center',
@@ -8377,7 +8358,7 @@ const getPopoverKeyframesStyles = {
         },
     },
 };
-const getPopoverJssStyle = (isOpen, direction, anchorName, cssVarScaling, // "1" is needed for components not yet supporting compact mode
+const getPopoverJssStyle = (isOpen, cssVarScaling, // "1" is needed for components not yet supporting compact mode
 optionHeight, theme) => {
     const { contrastLowColor, backgroundColor, backgroundSurfaceColor } = getThemedColors(theme);
     const { contrastLowColor: contrastLowColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark } = getThemedColors('dark');
@@ -8404,16 +8385,6 @@ optionHeight, theme) => {
             background: backgroundSurfaceColorDark,
             borderColor: contrastLowColorDark,
         }),
-        ...(getHasCSSAnchorPositioningSupport() && {
-            positionAnchor: anchorName,
-            positionVisibility: 'always',
-            positionTryOrder: 'normal',
-            positionArea: direction === 'up' ? 'top' : 'bottom',
-            positionTryFallbacks: 'flip-block',
-            width: 'anchor-size(width)',
-            maxHeight: `max(${minHeightOptionList}, calc(50vh - anchor-size(height) / 2 - ${OPTION_LIST_SAFE_ZONE}px * 2))`,
-            margin: `${OPTION_LIST_SAFE_ZONE}px 0`,
-        }),
         '&:not(:popover-open)': {
             display: 'none',
         },
@@ -8452,8 +8423,7 @@ const getPlaceholderJssStyle = (styles) => ({
     '&:-moz-placeholder': styles /* Firefox 18- */,
 });
 
-const anchorName$2 = '--anchor-multi-select';
-const getComponentCss$C = (direction, isOpen, isDisabled, hideLabel, state, hasNativeCSSAnchorPositioningSupport, theme) => {
+const getComponentCss$C = (isOpen, isDisabled, hideLabel, state, theme) => {
     const { primaryColor, disabledColor, contrastHighColor, contrastMediumColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, backgroundColor: backgroundColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
@@ -8531,11 +8501,8 @@ const getComponentCss$C = (direction, isOpen, isDisabled, hideLabel, state, hasN
                         WebkitTextFillColor: disabledColorDark,
                     }),
                 }),
-                ...(hasNativeCSSAnchorPositioningSupport && {
-                    anchorName: anchorName$2,
-                }),
             },
-            '[popover]': getPopoverJssStyle(isOpen, direction, anchorName$2, 1, 44, theme),
+            '[popover]': getPopoverJssStyle(isOpen, 1, 44, theme),
         },
         root: {
             display: 'grid',
@@ -9281,8 +9248,7 @@ const getComponentCss$u = (maxWidth, columns) => {
     });
 };
 
-const anchorName$1 = '--anchor-select-wrapper';
-const getButtonStyles = (isOpen, state, hasNativeCSSAnchorPositioningSupport, theme) => {
+const getButtonStyles = (isOpen, state, theme) => {
     const { primaryColor, disabledColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, contrastMediumColor: contrastMediumColorDark, } = getThemedColors('dark');
     const { formStateHoverColor, formStateColor } = getThemedFormStateColors(theme, state);
@@ -9291,9 +9257,6 @@ const getButtonStyles = (isOpen, state, hasNativeCSSAnchorPositioningSupport, th
         '@global': {
             // TODO: extract generic default button/anchor reset style
             button: {
-                ...(hasNativeCSSAnchorPositioningSupport && {
-                    anchorName: anchorName$1,
-                }),
                 position: 'absolute',
                 inset: 0,
                 width: '100%', // fixes Firefox positioning issue
@@ -9329,7 +9292,7 @@ const getButtonStyles = (isOpen, state, hasNativeCSSAnchorPositioningSupport, th
         },
     };
 };
-const getFilterStyles = (isOpen, state, disabled, hasNativeCSSAnchorPositioningSupport, theme) => {
+const getFilterStyles = (isOpen, state, disabled, theme) => {
     const { primaryColor, backgroundColor, disabledColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, disabledColor: disabledColorDark, contrastMediumColor: contrastMediumColorDark, } = getThemedColors('dark');
     const { formStateHoverColor, formStateColor } = getThemedFormStateColors(theme, state);
@@ -9373,9 +9336,6 @@ const getFilterStyles = (isOpen, state, disabled, hasNativeCSSAnchorPositioningS
                     color: primaryColorDark,
                     background: backgroundColorDark,
                 }),
-                ...(hasNativeCSSAnchorPositioningSupport && {
-                    anchorName: anchorName$1,
-                }),
                 '&::placeholder': {
                     ...placeHolderJssStyle,
                     ...prefersColorSchemeDarkMediaQuery(theme, placeHolderDarkJssStyle),
@@ -9433,14 +9393,14 @@ const getFilterStyles = (isOpen, state, disabled, hasNativeCSSAnchorPositioningS
         },
     };
 };
-const getListStyles = (direction, isOpen, theme) => {
+const getListStyles = (isOpen, theme) => {
     const { primaryColor, disabledColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark } = getThemedColors('dark');
     return {
         '@global': {
             // @keyframes fade-in
             ...getPopoverKeyframesStyles,
-            '[popover]': getPopoverJssStyle(isOpen, direction, anchorName$1, 1, 40, theme),
+            '[popover]': getPopoverJssStyle(isOpen, 1, 40, theme),
         },
         option: {
             ...getOptionJssStyle('select-wrapper', 1, theme),
@@ -9472,7 +9432,7 @@ const getListStyles = (direction, isOpen, theme) => {
         },
     };
 };
-const getComponentCss$t = (direction, isOpen, state, disabled, filter, hasNativeCSSAnchorPositioningSupport, theme) => {
+const getComponentCss$t = (isOpen, state, disabled, filter, theme) => {
     return getCss(
     // merge because of global styles
     mergeDeep({
@@ -9486,9 +9446,7 @@ const getComponentCss$t = (direction, isOpen, state, disabled, filter, hasNative
         'sr-text': {
             display: 'none',
         },
-    }, filter
-        ? getFilterStyles(isOpen, state, disabled, hasNativeCSSAnchorPositioningSupport, theme)
-        : getButtonStyles(isOpen, state, hasNativeCSSAnchorPositioningSupport, theme), getListStyles(direction, isOpen, theme)));
+    }, filter ? getFilterStyles(isOpen, state, disabled, theme) : getButtonStyles(isOpen, state, theme), getListStyles(isOpen, theme)));
 };
 
 const getComponentCss$s = (isDisabled, hasCustomDropdown, hideLabel, state, theme) => {
@@ -9573,8 +9531,7 @@ const getComponentCss$r = (theme) => {
 };
 
 const cssVarInternalSelectScaling = '--p-internal-select-scaling';
-const anchorName = '--anchor-select';
-const getComponentCss$q = (direction, isOpen, isDisabled, hideLabel, state, compact, theme, hasSlottedImage) => {
+const getComponentCss$q = (isOpen, isDisabled, hideLabel, state, compact, theme, hasSlottedImage) => {
     const scalingVar = `var(${cssVarInternalSelectScaling}, ${compact ? 0.5 : 1})`;
     return getCss({
         '@global': {
@@ -9593,11 +9550,11 @@ const getComponentCss$q = (direction, isOpen, isDisabled, hideLabel, state, comp
             }),
             ...preventFoucOfNestedElementsStyles,
             button: {
-                ...getButtonJssStyle('select', isOpen, isDisabled, state, hasSlottedImage, anchorName, scalingVar, theme),
+                ...getButtonJssStyle('select', isOpen, isDisabled, state, hasSlottedImage, scalingVar, theme),
                 '& img': getButtonImageJssStyle,
                 '& span': getButtonLabelJssStyle,
             },
-            '[popover]': getPopoverJssStyle(isOpen, direction, anchorName, scalingVar, 40, theme),
+            '[popover]': getPopoverJssStyle(isOpen, scalingVar, 40, theme),
         },
         root: {
             display: 'grid',

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

@@ -3543,22 +3543,6 @@ 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'];
@@ -3925,4 +3909,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, 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 };
+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$1 as 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 };

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 { getHasNativePopoverSupport, getHasCSSAnchorPositioningSupport, getSelectedOptionValues, getSelectedOptions } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { getHasNativePopoverSupport, 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';
@@ -35,7 +35,6 @@ class DSRMultiSelect extends Component {
     preventOptionUpdate = false; // Used to prevent value watcher from updating options when options are already updated
     popoverElement;
     hasNativePopoverSupport = getHasNativePopoverSupport();
-    hasNativeCSSAnchorPositioningSupport = getHasCSSAnchorPositioningSupport();
     cleanUpAutoUpdate;
     get currentValue() {
         return getSelectedOptionValues(this.props.multiSelectOptions);
@@ -59,7 +58,7 @@ class DSRMultiSelect extends Component {
         const inputId = 'filter';
         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)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$C(this.props.isOpen, this.props.disabled, 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, 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/select-wrapper-dropdown.mjs

@@ -4,7 +4,7 @@ import '../../provider.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.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';
+import { getHasNativePopoverSupport, getSelectedOptionMap } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 
 class DSRSelectWrapperDropdown extends Component {
     host;
@@ -14,7 +14,6 @@ class DSRSelectWrapperDropdown extends Component {
     inputOrButtonElement;
     popoverElement;
     hasNativePopoverSupport = getHasNativePopoverSupport();
-    hasNativeCSSAnchorPositioningSupport = getHasCSSAnchorPositioningSupport();
     cleanUpAutoUpdate;
     get selectedIndex() {
         return 0;
@@ -25,7 +24,7 @@ class DSRSelectWrapperDropdown extends Component {
         const inputId = 'filter';
         this.props.description && 'description';
         const buttonId = 'value';
-        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)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$t(this.isOpen, this.props.state, this.props.disabled, this.props.filter, 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", { id: inputId, type: "text", role: "combobox", disabled: this.props.disabled, placeholder: getSelectedOptionMap(this.optionMaps)?.value || null, autoComplete: "off", defaultValue: this.searchString }, "input"),
                             jsx("span", { 

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

@@ -5,7 +5,7 @@ import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
 import { stripFocusAndHoverStyles } from '../../stripFocusAndHoverStyles.mjs';
 import { getSelectCss as getComponentCss$q } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { getHasNativePopoverSupport, getHasCSSAnchorPositioningSupport, getSelectedOptionString, getComboboxAriaAttributes, getListAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { getHasNativePopoverSupport, getSelectedOptionString, getComboboxAriaAttributes, getListAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { Label, labelId } from './label.mjs';
 import { messageId, StateMessage } from './state-message.mjs';
 import { PIcon } from '../components/icon.wrapper.mjs';
@@ -35,7 +35,6 @@ class DSRSelect extends Component {
     searchTimeout = null;
     slottedImagePath = '';
     hasNativePopoverSupport = getHasNativePopoverSupport();
-    hasNativeCSSAnchorPositioningSupport = getHasCSSAnchorPositioningSupport();
     cleanUpAutoUpdate;
     formDisabledCallback() {
     }
@@ -53,7 +52,7 @@ class DSRSelect extends Component {
         const initialStatusId = 'initial-status';
         const ariaDescribedBy = [descriptionId, selectMessageId, initialStatusId].filter(Boolean).join(' ');
         const selectedOption = getSelectedOptionString(otherChildren);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$q(this.props.dropdownDirection, this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.compact, this.props.theme, !!this.props.slottedImagePath)));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$q(this.props.isOpen, this.props.disabled, this.props.hideLabel, this.props.state, this.props.compact, this.props.theme, !!this.props.slottedImagePath)));
         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: buttonId, isRequired: this.props.required, isDisabled: this.props.disabled }), jsxs("button", { "aria-invalid": this.props.state === 'error' ? 'true' : null, type: "button", role: "combobox", id: buttonId, ...getComboboxAriaAttributes(this.props.isOpen, this.props.required, labelId, ariaDescribedBy, popoverId), disabled: this.props.disabled, children: [this.props.slottedImagePath && jsx("img", { src: this.props.slottedImagePath, alt: "" }), jsx("span", { children: selectedOption }), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: this.props.disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" })] }), jsx("div", { id: popoverId, popover: "manual", tabIndex: -1, ...getListAriaAttributes(this.props.label, this.props.required, false, this.props.isOpen), children: 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.srHighlightedOptionText })] })] }), this.props.children] }));
     }
     getSelectedOptionImagePath = (options) => {

package/ssr/esm/lib/dsr-components/multi-select.d.ts

@@ -21,7 +21,6 @@ export declare class DSRMultiSelect extends Component<any> {
     private preventOptionUpdate;
     private popoverElement;
     private hasNativePopoverSupport;
-    private hasNativeCSSAnchorPositioningSupport;
     private cleanUpAutoUpdate;
     private get currentValue();
     setFormValue(value: string[]): void;

package/ssr/esm/lib/dsr-components/select-wrapper-dropdown.d.ts

@@ -7,7 +7,6 @@ export declare class DSRSelectWrapperDropdown extends Component<any> {
     private inputOrButtonElement;
     private popoverElement;
     private hasNativePopoverSupport;
-    private hasNativeCSSAnchorPositioningSupport;
     private cleanUpAutoUpdate;
     private get selectedIndex();
     render(): JSX.Element;

package/ssr/esm/lib/dsr-components/select.d.ts

@@ -22,7 +22,6 @@ export declare class DSRSelect extends Component<any> {
     private searchTimeout;
     private slottedImagePath;
     private hasNativePopoverSupport;
-    private hasNativeCSSAnchorPositioningSupport;
     private cleanUpAutoUpdate;
     formDisabledCallback(): void;
     formStateRestoreCallback(): void;