@porsche-design-system/components-react 3.15.0 → 3.15.2

package/CHANGELOG.md

@@ -14,6 +14,19 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.15.2] - 2024-05-29
+
+#### Fixed
+
+- `aria`: Refactor `parseJSONAttribute` to support Safari < 16.4  
+  ([#3314](https://github.com/porsche-design-system/porsche-design-system/pull/3314))
+
+### [3.15.1] - 2024-05-23
+
+#### Fixed
+
+- `Banner`: Fixed position on mobile ([#3307](https://github.com/porsche-design-system/porsche-design-system/pull/3307))
+
 ### [3.15.0] - 2024-05-16
 
 ### [3.15.0-rc.5] - 2024-05-16
@@ -22,14 +35,25 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 - `Button Pure`: Prop `underline` to show an underline for the label
   ([#3212](https://github.com/porsche-design-system/porsche-design-system/pull/3212))
-  
+- Partials: Added new option `globalStyles` to `getInitialStyles` to disable global reset styles.  
+  ([#3213](https://github.com/porsche-design-system/porsche-design-system/pull/3213))
+
 #### Changed
 
-- Banner: Refactor Banner to use native `popover`
+- `Banner`: Refactor Banner to use native `popover`
   ([#3196](https://github.com/porsche-design-system/porsche-design-system/pull/3196))
+- Partials: `getInitialStyles` only contain hydration visibility and global styles. All other styles are handled by
+  constructable stylesheets at component level.
+  ([#3213](https://github.com/porsche-design-system/porsche-design-system/pull/3213))
+- `Table`: Removed slotted image style `verticalAlign: 'middle'` from initialStyles
+  ([#3213](https://github.com/porsche-design-system/porsche-design-system/pull/3213))
+- `Tabs Bar`: Removed sibling tabpanel focus style from initialStyles
+  ([#3213](https://github.com/porsche-design-system/porsche-design-system/pull/3213))
 
 #### Fixed
 
+- `Carousel`: Accessible name of carousel region wrapper
+  ([#3220](https://github.com/porsche-design-system/porsche-design-system/pull/3220))
 - `aria` property now supports escaped single quotes inside JSON strings, e.g.
   `aria="{ 'aria-label': 'You can\'t do that? yes you can!' }"`
   ([#3217](https://github.com/porsche-design-system/porsche-design-system/pull/3217))
@@ -97,7 +121,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 - `Model Signature`: Enabling the use of hex colors, CSS gradients, CSS image and video masks. In addition, the size was
   slightly adjusted. ([#3153](https://github.com/porsche-design-system/porsche-design-system/pull/3153))
 
-### Fixed
+#### Fixed
 
 - `Modal`: Missing box-shadow on sticky footer when slotted content changes
   ([#3154](https://github.com/porsche-design-system/porsche-design-system/pull/3154))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.15.0",
+  "version": "3.15.2",
   "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.15.0"
+    "@porsche-design-system/components-js": "3.15.2"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

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

@@ -3161,17 +3161,6 @@ const hasWindow = typeof window !== 'undefined';
 
 const isHighContrastMode = hasWindow && window.matchMedia?.('(forced-colors: active)').matches;
 
-const attributeMutationMap = new Map();
-hasWindow &&
-    new MutationObserver((mutations) => {
-        mutations
-            // reduce array to only entries that have really a changed value
-            .filter((mutation) => mutation.oldValue !== mutation.target.getAttribute(mutation.attributeName))
-            // remove duplicates so we execute callback only once per node
-            .filter((mutation, idx, arr) => arr.findIndex((m) => m.target === mutation.target) === idx)
-            .forEach((mutation) => attributeMutationMap.get(mutation.target)?.());
-    });
-
 const parseJSON = (prop) => {
     if (typeof prop === 'string') {
         try {
@@ -3477,217 +3466,6 @@ const textLargeStyle = {
     ...fontHyphenationStyle,
 };
 
-const mediaQueries = Object.values(breakpoint).map((v) => `(min-width:${v}px)`);
-hasWindow && window.matchMedia ? mediaQueries.map(window.matchMedia) : [];
-
-Object.entries(breakpoint).reduce((result, [key, val]) => ({ ...result, [`${val}px`]: key }), {});
-
-const hasVisibleIcon = (iconName, iconSource) => {
-    return iconName !== 'none' || !!iconSource;
-};
-
-/**
- * Map of observed nodes and their corresponding callback functions.
- */
-const observedNodesMap = new Map();
-/**
- * Mutation observer for observing changes in the children of observed nodes.
- */
-hasWindow &&
-    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) {
-            const observedNodes = Array.from(observedNodesMap.keys());
-            mutations
-                // remove duplicates so we execute callback only once per node
-                .filter((mutation, idx, arr) => arr.findIndex((m) => m.target === mutation.target) === idx)
-                // find all observing parent nodes of mutated node and invoke their callbacks
-                .forEach((mutation) => {
-                observedNodes
-                    .filter((node) => node.contains(mutation.target))
-                    .forEach((node) => observedNodesMap.get(node)?.());
-            });
-        }
-    });
-
-/* eslint-disable no-undefined,no-param-reassign,no-shadow */
-
-/**
- * Throttle execution of a function. Especially useful for rate limiting
- * execution of handlers on events like resize and scroll.
- *
- * @param {number} delay -                  A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher)
- *                                            are most useful.
- * @param {Function} callback -               A function to be executed after delay milliseconds. The `this` context and all arguments are passed through,
- *                                            as-is, to `callback` when the throttled-function is executed.
- * @param {object} [options] -              An object to configure options.
- * @param {boolean} [options.noTrailing] -   Optional, defaults to false. If noTrailing is true, callback will only execute every `delay` milliseconds
- *                                            while the throttled-function is being called. If noTrailing is false or unspecified, callback will be executed
- *                                            one final time after the last throttled-function call. (After the throttled-function has not been called for
- *                                            `delay` milliseconds, the internal counter is reset).
- * @param {boolean} [options.noLeading] -   Optional, defaults to false. If noLeading is false, the first throttled-function call will execute callback
- *                                            immediately. If noLeading is true, the first the callback execution will be skipped. It should be noted that
- *                                            callback will never executed if both noLeading = true and noTrailing = true.
- * @param {boolean} [options.debounceMode] - If `debounceMode` is true (at begin), schedule `clear` to execute after `delay` ms. If `debounceMode` is
- *                                            false (at end), schedule `callback` to execute after `delay` ms.
- *
- * @returns {Function} A new, throttled, function.
- */
-function throttle (delay, callback, options) {
-  var _ref = options || {},
-      _ref$noTrailing = _ref.noTrailing,
-      noTrailing = _ref$noTrailing === void 0 ? false : _ref$noTrailing,
-      _ref$noLeading = _ref.noLeading,
-      noLeading = _ref$noLeading === void 0 ? false : _ref$noLeading,
-      _ref$debounceMode = _ref.debounceMode,
-      debounceMode = _ref$debounceMode === void 0 ? undefined : _ref$debounceMode;
-  /*
-   * After wrapper has stopped being called, this timeout ensures that
-   * `callback` is executed at the proper times in `throttle` and `end`
-   * debounce modes.
-   */
-
-
-  var timeoutID;
-  var cancelled = false; // Keep track of the last time `callback` was executed.
-
-  var lastExec = 0; // Function to clear existing timeout
-
-  function clearExistingTimeout() {
-    if (timeoutID) {
-      clearTimeout(timeoutID);
-    }
-  } // Function to cancel next exec
-
-
-  function cancel(options) {
-    var _ref2 = options || {},
-        _ref2$upcomingOnly = _ref2.upcomingOnly,
-        upcomingOnly = _ref2$upcomingOnly === void 0 ? false : _ref2$upcomingOnly;
-
-    clearExistingTimeout();
-    cancelled = !upcomingOnly;
-  }
-  /*
-   * The `wrapper` function encapsulates all of the throttling / debouncing
-   * functionality and when executed will limit the rate at which `callback`
-   * is executed.
-   */
-
-
-  function wrapper() {
-    for (var _len = arguments.length, arguments_ = new Array(_len), _key = 0; _key < _len; _key++) {
-      arguments_[_key] = arguments[_key];
-    }
-
-    var self = this;
-    var elapsed = Date.now() - lastExec;
-
-    if (cancelled) {
-      return;
-    } // Execute `callback` and update the `lastExec` timestamp.
-
-
-    function exec() {
-      lastExec = Date.now();
-      callback.apply(self, arguments_);
-    }
-    /*
-     * If `debounceMode` is true (at begin) this is used to clear the flag
-     * to allow future `callback` executions.
-     */
-
-
-    function clear() {
-      timeoutID = undefined;
-    }
-
-    if (!noLeading && debounceMode && !timeoutID) {
-      /*
-       * Since `wrapper` is being called for the first time and
-       * `debounceMode` is true (at begin), execute `callback`
-       * and noLeading != true.
-       */
-      exec();
-    }
-
-    clearExistingTimeout();
-
-    if (debounceMode === undefined && elapsed > delay) {
-      if (noLeading) {
-        /*
-         * In throttle mode with noLeading, if `delay` time has
-         * been exceeded, update `lastExec` and schedule `callback`
-         * to execute after `delay` ms.
-         */
-        lastExec = Date.now();
-
-        if (!noTrailing) {
-          timeoutID = setTimeout(debounceMode ? clear : exec, delay);
-        }
-      } else {
-        /*
-         * In throttle mode without noLeading, if `delay` time has been exceeded, execute
-         * `callback`.
-         */
-        exec();
-      }
-    } else if (noTrailing !== true) {
-      /*
-       * In trailing throttle mode, since `delay` time has not been
-       * exceeded, schedule `callback` to execute `delay` ms after most
-       * recent execution.
-       *
-       * If `debounceMode` is true (at begin), schedule `clear` to execute
-       * after `delay` ms.
-       *
-       * If `debounceMode` is false (at end), schedule `callback` to
-       * execute after `delay` ms.
-       */
-      timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
-    }
-  }
-
-  wrapper.cancel = cancel; // Return the wrapper function.
-
-  return wrapper;
-}
-
-/* eslint-disable no-undefined */
-/**
- * Debounce execution of a function. Debouncing, unlike throttling,
- * guarantees that a function is only executed a single time, either at the
- * very beginning of a series of calls, or at the very end.
- *
- * @param {number} delay -               A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
- * @param {Function} callback -          A function to be executed after delay milliseconds. The `this` context and all arguments are passed through, as-is,
- *                                        to `callback` when the debounced-function is executed.
- * @param {object} [options] -           An object to configure options.
- * @param {boolean} [options.atBegin] -  Optional, defaults to false. If atBegin is false or unspecified, callback will only be executed `delay` milliseconds
- *                                        after the last debounced-function call. If atBegin is true, callback will be executed only at the first debounced-function call.
- *                                        (After the throttled-function has not been called for `delay` milliseconds, the internal counter is reset).
- *
- * @returns {Function} A new, debounced function.
- */
-
-function debounce (delay, callback, options) {
-  var _ref = options || {},
-      _ref$atBegin = _ref.atBegin,
-      atBegin = _ref$atBegin === void 0 ? false : _ref$atBegin;
-
-  return throttle(delay, callback, {
-    debounceMode: atBegin !== false
-  });
-}
-
-debounce(800, (el, ariaElement) => {
-    ariaElement.innerText = `You have ${el.maxLength - el.value.length} out of ${el.maxLength} characters left`;
-});
-
-const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
-
-const MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.min.493a9e3509d6e263fa2207150082def5.svg", "width": 79, "height": 26 }, "911": { "src": "911.min.b68f913216168583298ccf83f1a6b8d5.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.min.c321738789b37fda4bba3f7c587542aa.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.min.25562011631a831516f91ec31d144104.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.min.cc8919694c002873e1bb6a3c1dae5d41.svg", "width": 229, "height": 35 }, "macan": { "src": "macan.min.a1844f4c8d23b75e371745e9b8eb49b9.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.min.6dae8095186567168f85c145845f090c.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.min.df444c6f4cc1f627ceaf1b02584d6bea.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.min.73f1e10731caffe93c07d96fa08546c1.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.min.6a4084a8704a6c47a099b2de56b22aef.svg", "width": 143, "height": 25 } };
-
 /* Auto Generated Start */
 const themeLight = {
     primaryColor: '#010205',
@@ -4018,6 +3796,238 @@ const mergeDeep = (...objects) => {
     }, {});
 };
 
+// TODO: Use function from ./jss (Causes bundling issues)
+(() => {
+    try {
+        return typeof new CSSStyleSheet().replaceSync === 'function';
+    }
+    catch {
+        return false;
+    }
+})(); // determine it once
+
+const attributeMutationMap = new Map();
+hasWindow &&
+    new MutationObserver((mutations) => {
+        mutations
+            // reduce array to only entries that have really a changed value
+            .filter((mutation) => mutation.oldValue !== mutation.target.getAttribute(mutation.attributeName))
+            // remove duplicates so we execute callback only once per node
+            .filter((mutation, idx, arr) => arr.findIndex((m) => m.target === mutation.target) === idx)
+            .forEach((mutation) => attributeMutationMap.get(mutation.target)?.());
+    });
+
+const mediaQueries = Object.values(breakpoint).map((v) => `(min-width:${v}px)`);
+hasWindow && window.matchMedia ? mediaQueries.map(window.matchMedia) : [];
+
+Object.entries(breakpoint).reduce((result, [key, val]) => ({ ...result, [`${val}px`]: key }), {});
+
+const hasVisibleIcon = (iconName, iconSource) => {
+    return iconName !== 'none' || !!iconSource;
+};
+
+/**
+ * Map of observed nodes and their corresponding callback functions.
+ */
+const observedNodesMap = new Map();
+/**
+ * Mutation observer for observing changes in the children of observed nodes.
+ */
+hasWindow &&
+    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) {
+            const observedNodes = Array.from(observedNodesMap.keys());
+            mutations
+                // remove duplicates so we execute callback only once per node
+                .filter((mutation, idx, arr) => arr.findIndex((m) => m.target === mutation.target) === idx)
+                // find all observing parent nodes of mutated node and invoke their callbacks
+                .forEach((mutation) => {
+                observedNodes
+                    .filter((node) => node.contains(mutation.target))
+                    .forEach((node) => observedNodesMap.get(node)?.());
+            });
+        }
+    });
+
+/* eslint-disable no-undefined,no-param-reassign,no-shadow */
+
+/**
+ * Throttle execution of a function. Especially useful for rate limiting
+ * execution of handlers on events like resize and scroll.
+ *
+ * @param {number} delay -                  A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher)
+ *                                            are most useful.
+ * @param {Function} callback -               A function to be executed after delay milliseconds. The `this` context and all arguments are passed through,
+ *                                            as-is, to `callback` when the throttled-function is executed.
+ * @param {object} [options] -              An object to configure options.
+ * @param {boolean} [options.noTrailing] -   Optional, defaults to false. If noTrailing is true, callback will only execute every `delay` milliseconds
+ *                                            while the throttled-function is being called. If noTrailing is false or unspecified, callback will be executed
+ *                                            one final time after the last throttled-function call. (After the throttled-function has not been called for
+ *                                            `delay` milliseconds, the internal counter is reset).
+ * @param {boolean} [options.noLeading] -   Optional, defaults to false. If noLeading is false, the first throttled-function call will execute callback
+ *                                            immediately. If noLeading is true, the first the callback execution will be skipped. It should be noted that
+ *                                            callback will never executed if both noLeading = true and noTrailing = true.
+ * @param {boolean} [options.debounceMode] - If `debounceMode` is true (at begin), schedule `clear` to execute after `delay` ms. If `debounceMode` is
+ *                                            false (at end), schedule `callback` to execute after `delay` ms.
+ *
+ * @returns {Function} A new, throttled, function.
+ */
+function throttle (delay, callback, options) {
+  var _ref = options || {},
+      _ref$noTrailing = _ref.noTrailing,
+      noTrailing = _ref$noTrailing === void 0 ? false : _ref$noTrailing,
+      _ref$noLeading = _ref.noLeading,
+      noLeading = _ref$noLeading === void 0 ? false : _ref$noLeading,
+      _ref$debounceMode = _ref.debounceMode,
+      debounceMode = _ref$debounceMode === void 0 ? undefined : _ref$debounceMode;
+  /*
+   * After wrapper has stopped being called, this timeout ensures that
+   * `callback` is executed at the proper times in `throttle` and `end`
+   * debounce modes.
+   */
+
+
+  var timeoutID;
+  var cancelled = false; // Keep track of the last time `callback` was executed.
+
+  var lastExec = 0; // Function to clear existing timeout
+
+  function clearExistingTimeout() {
+    if (timeoutID) {
+      clearTimeout(timeoutID);
+    }
+  } // Function to cancel next exec
+
+
+  function cancel(options) {
+    var _ref2 = options || {},
+        _ref2$upcomingOnly = _ref2.upcomingOnly,
+        upcomingOnly = _ref2$upcomingOnly === void 0 ? false : _ref2$upcomingOnly;
+
+    clearExistingTimeout();
+    cancelled = !upcomingOnly;
+  }
+  /*
+   * The `wrapper` function encapsulates all of the throttling / debouncing
+   * functionality and when executed will limit the rate at which `callback`
+   * is executed.
+   */
+
+
+  function wrapper() {
+    for (var _len = arguments.length, arguments_ = new Array(_len), _key = 0; _key < _len; _key++) {
+      arguments_[_key] = arguments[_key];
+    }
+
+    var self = this;
+    var elapsed = Date.now() - lastExec;
+
+    if (cancelled) {
+      return;
+    } // Execute `callback` and update the `lastExec` timestamp.
+
+
+    function exec() {
+      lastExec = Date.now();
+      callback.apply(self, arguments_);
+    }
+    /*
+     * If `debounceMode` is true (at begin) this is used to clear the flag
+     * to allow future `callback` executions.
+     */
+
+
+    function clear() {
+      timeoutID = undefined;
+    }
+
+    if (!noLeading && debounceMode && !timeoutID) {
+      /*
+       * Since `wrapper` is being called for the first time and
+       * `debounceMode` is true (at begin), execute `callback`
+       * and noLeading != true.
+       */
+      exec();
+    }
+
+    clearExistingTimeout();
+
+    if (debounceMode === undefined && elapsed > delay) {
+      if (noLeading) {
+        /*
+         * In throttle mode with noLeading, if `delay` time has
+         * been exceeded, update `lastExec` and schedule `callback`
+         * to execute after `delay` ms.
+         */
+        lastExec = Date.now();
+
+        if (!noTrailing) {
+          timeoutID = setTimeout(debounceMode ? clear : exec, delay);
+        }
+      } else {
+        /*
+         * In throttle mode without noLeading, if `delay` time has been exceeded, execute
+         * `callback`.
+         */
+        exec();
+      }
+    } else if (noTrailing !== true) {
+      /*
+       * In trailing throttle mode, since `delay` time has not been
+       * exceeded, schedule `callback` to execute `delay` ms after most
+       * recent execution.
+       *
+       * If `debounceMode` is true (at begin), schedule `clear` to execute
+       * after `delay` ms.
+       *
+       * If `debounceMode` is false (at end), schedule `callback` to
+       * execute after `delay` ms.
+       */
+      timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
+    }
+  }
+
+  wrapper.cancel = cancel; // Return the wrapper function.
+
+  return wrapper;
+}
+
+/* eslint-disable no-undefined */
+/**
+ * Debounce execution of a function. Debouncing, unlike throttling,
+ * guarantees that a function is only executed a single time, either at the
+ * very beginning of a series of calls, or at the very end.
+ *
+ * @param {number} delay -               A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
+ * @param {Function} callback -          A function to be executed after delay milliseconds. The `this` context and all arguments are passed through, as-is,
+ *                                        to `callback` when the debounced-function is executed.
+ * @param {object} [options] -           An object to configure options.
+ * @param {boolean} [options.atBegin] -  Optional, defaults to false. If atBegin is false or unspecified, callback will only be executed `delay` milliseconds
+ *                                        after the last debounced-function call. If atBegin is true, callback will be executed only at the first debounced-function call.
+ *                                        (After the throttled-function has not been called for `delay` milliseconds, the internal counter is reset).
+ *
+ * @returns {Function} A new, debounced function.
+ */
+
+function debounce (delay, callback, options) {
+  var _ref = options || {},
+      _ref$atBegin = _ref.atBegin,
+      atBegin = _ref$atBegin === void 0 ? false : _ref$atBegin;
+
+  return throttle(delay, callback, {
+    debounceMode: atBegin !== false
+  });
+}
+
+debounce(800, (el, ariaElement) => {
+    ariaElement.innerText = `You have ${el.maxLength - el.value.length} out of ${el.maxLength} characters left`;
+});
+
+const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
+
+const MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.min.493a9e3509d6e263fa2207150082def5.svg", "width": 79, "height": 26 }, "911": { "src": "911.min.b68f913216168583298ccf83f1a6b8d5.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.min.c321738789b37fda4bba3f7c587542aa.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.min.25562011631a831516f91ec31d144104.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.min.cc8919694c002873e1bb6a3c1dae5d41.svg", "width": 229, "height": 35 }, "macan": { "src": "macan.min.a1844f4c8d23b75e371745e9b8eb49b9.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.min.6dae8095186567168f85c145845f090c.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.min.df444c6f4cc1f627ceaf1b02584d6bea.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.min.73f1e10731caffe93c07d96fa08546c1.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.min.6a4084a8704a6c47a099b2de56b22aef.svg", "width": 143, "height": 25 } };
+
 const scrollShadowColor = 'rgba(204, 204, 204, 0.35)';
 const scrollShadowColorDark = 'rgba(0, 0, 0, 0.6)';
 
@@ -4237,6 +4247,7 @@ const getBannerPopoverResetStyles = () => {
         position: 'fixed',
         margin: 0,
         padding: 0,
+        inset: 'auto', // ua popover reset
         width: 'auto', // ua popover reset
         height: 'auto', // ua popover reset
         maxWidth: '100%', // If component is wrapped in container with maxWidth
@@ -4263,6 +4274,9 @@ const getComponentCss$14 = (isOpen) => {
                     zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})`,
                     ...dropShadowHighStyle,
                     borderRadius: borderRadiusSmall, // needed for rounded box-shadow
+                    '&::backdrop': {
+                        display: 'none',
+                    },
                     ...(isOpen
                         ? {
                             opacity: 1,
@@ -4842,7 +4856,7 @@ const paginationWidth = `calc(${paginationActiveBulletSize} + ${paginationBullet
 const paginationInset = '8px'; // Used to increase clickable area on touch devices
 const paginationGapLarge = '16px';
 const paginationWidthLarge = `calc(${paginationActiveBulletSize} + ${paginationBulletSize} * ${paginationVisibleBulletCount - 1} + ${paginationGapLarge} * ${paginationVisibleBulletCount - 1} + 2 * ${paginationInset})`; // Width for one active bullet + width of inactive bullets + spacing
-const selectorHeading = 'h2,::slotted([slot="heading"])';
+const selectorHeading = '.heading';
 const selectorDescription = 'p,::slotted([slot="description"])';
 const mediaQueryS = getMediaQueryMin('s');
 const mediaQueryXXL = getMediaQueryMin('xxl');
@@ -4888,7 +4902,7 @@ const getComponentCss$$ = (hasHeading, hasDescription, hasControlsSlot, headingS
                     ...getFocusJssStyle(theme, { slotted: true }),
                 },
                 // TODO: maybe it's better to style with slot[name="heading"] and slot[name="description"] instead, then styles would be part of shadow dom
-                // h2,::slotted([slot=heading]),p,::slotted([slot=description])
+                // .heading,p,::slotted([slot=description])
                 ...((hasHeading || hasDescription) && {
                     [`${selectorHeading},${selectorDescription}`]: {
                         gridColumn: '1/-1',
@@ -4902,13 +4916,16 @@ const getComponentCss$$ = (hasHeading, hasDescription, hasControlsSlot, headingS
                         }),
                     },
                 }),
-                // h2,::slotted([slot=heading])
                 ...(hasHeading && {
                     [selectorHeading]: {
                         maxWidth: '56.25rem',
                         margin: `0 0 ${!hasDescription ? spacingFluidMedium : 0}`,
                         ...(headingSize === 'xx-large' ? headingXXLargeStyle : headingXLargeStyle),
                     },
+                    ['::slotted([slot=heading])']: {
+                        margin: 0, // reset ua-style
+                        ...(headingSize === 'xx-large' ? headingXXLargeStyle : headingXLargeStyle),
+                    },
                 }),
                 // p,::slotted([slot=description])
                 ...(hasDescription && {