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

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

@@ -3255,17 +3255,6 @@ const getOptionAriaAttributes = (isSelected, isDisabled, isHidden, hasValue) =>
     'aria-label': hasValue ? null : 'Empty value',
 });
 
-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 borderWidthBase = '2px';
 
 const fontFamily = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
@@ -3326,6 +3315,46 @@ const textSmallStyle = {
     ...fontHyphenationStyle,
 };
 
+// NOTE: handpicked selection of plugins from jss-preset-default
+createJss({
+    plugins: [
+        jssGlobal(),
+        jssNested(),
+        camelCase(),
+        jssPluginSortMediaQueries({ combineMediaQueries: true }),
+    ],
+});
+const supportsConstructableStylesheets = () => {
+    try {
+        return typeof new CSSStyleSheet().replaceSync === 'function';
+    }
+    catch {
+        return false;
+    }
+};
+// determine it once
+supportsConstructableStylesheets();
+// 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) : [];
 
@@ -3554,26 +3583,6 @@ const ICONS_MANIFEST = { "360": "360.min.d3b2874981886b5ebece31655f92a3ad.svg",
 const MARQUES_MANIFEST = { "porscheMarqueTrademark": { "medium": { "1x": { "png": "porsche-marque-trademark.medium.min.da075315857e239ff46bf4c150648ff0@1x.png", "webp": "porsche-marque-trademark.medium.min.5c6af9aa7946fea34f60c8f8c95d0188@1x.webp" }, "2x": { "png": "porsche-marque-trademark.medium.min.aa801f42028b1c385a5e26ae115da598@2x.png", "webp": "porsche-marque-trademark.medium.min.fff6e9b91481cc5b1fc6c9b62987ccaf@2x.webp" }, "3x": { "png": "porsche-marque-trademark.medium.min.824818d15eaf445f50e0a2391613f214@3x.png", "webp": "porsche-marque-trademark.medium.min.f67092ff6b5f4ecb4add73d6ae153db0@3x.webp" } }, "small": { "1x": { "png": "porsche-marque-trademark.small.min.020244b41a29323e2a7932a264514cdf@1x.png", "webp": "porsche-marque-trademark.small.min.783639706bead66b2d56e3b8b64bd61f@1x.webp" }, "2x": { "png": "porsche-marque-trademark.small.min.92184fae44511ceda8320443c17110b1@2x.png", "webp": "porsche-marque-trademark.small.min.760a57efa93d4e7e16e26128ec7ead46@2x.webp" }, "3x": { "png": "porsche-marque-trademark.small.min.fd545cea4298f5d797246d5805711646@3x.png", "webp": "porsche-marque-trademark.small.min.1726036a7829347e1e24d1eb54fc0d64@3x.webp" } } }, "porscheMarque": { "medium": { "1x": { "png": "porsche-marque.medium.min.a98627440b05154565f9f9dfc1ad6187@1x.png", "webp": "porsche-marque.medium.min.fa908e4dfdc5536b0e933e1670d20e1f@1x.webp" }, "2x": { "png": "porsche-marque.medium.min.089d6dd560fff7a2bf613ae6d528990e@2x.png", "webp": "porsche-marque.medium.min.7f0893dc57f2607a2cb0b817d96cb985@2x.webp" }, "3x": { "png": "porsche-marque.medium.min.2cb874345ef290831c929f6caabfeef8@3x.png", "webp": "porsche-marque.medium.min.3534cf066b4e2e737dca62de495f9616@3x.webp" } }, "small": { "1x": { "png": "porsche-marque.small.min.ac2042736af5512cf547c89fa7924c4f@1x.png", "webp": "porsche-marque.small.min.005debed5bf72cf0a9a791b1521f5e1d@1x.webp" }, "2x": { "png": "porsche-marque.small.min.22f1e9dc90399d9a5287eda689b60dba@2x.png", "webp": "porsche-marque.small.min.df4317325d04ffef28c7839aa6d499a0@2x.webp" }, "3x": { "png": "porsche-marque.small.min.49209245f04eadef8817b9bbae80d3e1@3x.png", "webp": "porsche-marque.small.min.cfd6149aaa3bc5b3b522538e5f650890@3x.webp" } } }, "porscheMarque75": { "medium": { "1x": { "png": "porsche-marque75.medium.min.0a02e2256062de963f2fef2c02d20200@1x.png", "webp": "porsche-marque75.medium.min.99b2d657558f0531d639782974e8fd06@1x.webp" }, "2x": { "png": "porsche-marque75.medium.min.1d41ecfb8f5277d3f4bd65d25d22eea3@2x.png", "webp": "porsche-marque75.medium.min.e32580cd1ac179e354ed8fcb31694168@2x.webp" }, "3x": { "png": "porsche-marque75.medium.min.373bcb5f89d31c8b6084e66e902b9f4c@3x.png", "webp": "porsche-marque75.medium.min.4a003d1e5e81db062bf92d52ba797087@3x.webp" } }, "small": { "1x": { "png": "porsche-marque75.small.min.f5b37fe12cd4487432ff77fdd8469f7d@1x.png", "webp": "porsche-marque75.small.min.146b06cffe2b11c07f3113a51f337b98@1x.webp" }, "2x": { "png": "porsche-marque75.small.min.20d86908f2190640a6f24fce1ee49035@2x.png", "webp": "porsche-marque75.small.min.025770f8db54857874c130999b370ed8@2x.webp" }, "3x": { "png": "porsche-marque75.small.min.e89b13e14a088a273107bf1057f7f67d@3x.png", "webp": "porsche-marque75.small.min.a725d2ec7bd07be17afd8feb2589b156@3x.webp" } } } };
 
 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 } };
-
-// NOTE: handpicked selection of plugins from jss-preset-default
-createJss({
-    plugins: [
-        jssGlobal(),
-        jssNested(),
-        camelCase(),
-        jssPluginSortMediaQueries({ combineMediaQueries: true }),
-    ],
-});
-const supportsConstructableStylesheets = () => {
-    try {
-        return typeof new CSSStyleSheet().replaceSync === 'function';
-    }
-    catch {
-        return false;
-    }
-};
-// determine it once
-supportsConstructableStylesheets();
 const isScrollable = (isPrevHidden, isNextHidden) => {
     return !(isPrevHidden && isNextHidden);
 };

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

@@ -112,8 +112,9 @@ class DSRCarousel extends react.Component {
                 ? Object.fromEntries(Object.entries(this.props.disablePagination).map(([key, value]) => [key, !value]))
                 : !this.props.disablePagination
             : this.props.pagination, utilsEntry.isInfinitePagination(this.props.amountOfPages), (alignHeaderDeprecationMap[this.props.alignHeader] || this.props.alignHeader), this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "header", children: [hasHeadingPropOrSlot && (this.props.heading ? jsxRuntime.jsx("h2", { id: headingId, children: this.props.heading }) : jsxRuntime.jsx("slot", { name: "heading" })), hasDescriptionPropOrSlot && (this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", { name: "description" })), hasControlsSlot && jsxRuntime.jsx("slot", { name: "controls" }), jsxRuntime.jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsxRuntime.jsx(linkPure_wrapper.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) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-left" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-right" }))] })] }), jsxRuntime.jsx("div", { id: "splide", className: "splide", ...utilsEntry.parseAndGetAriaAttributes({
-                                        'aria-label': this.props.heading,
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "header", children: [hasHeadingPropOrSlot &&
+                                            (this.props.heading ? (jsxRuntime.jsx("h2", { className: "heading", id: headingId, children: this.props.heading })) : (jsxRuntime.jsx("div", { className: "heading", id: headingId, children: jsxRuntime.jsx("slot", { name: "heading" }) }))), hasDescriptionPropOrSlot && (this.props.description ? jsxRuntime.jsx("p", { children: this.props.description }) : jsxRuntime.jsx("slot", { name: "description" })), hasControlsSlot && jsxRuntime.jsx("slot", { name: "controls" }), jsxRuntime.jsxs("div", { className: "nav", children: [this.props.skipLinkTarget && (jsxRuntime.jsx(linkPure_wrapper.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) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-left" })), (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...btnProps, icon: "arrow-right" }))] })] }), jsxRuntime.jsx("div", { id: "splide", className: "splide", ...utilsEntry.parseAndGetAriaAttributes({
+                                        'aria-labelledby': hasHeadingPropOrSlot && !this.props.aria ? headingId : undefined,
                                         ...utilsEntry.parseAndGetAriaAttributes(this.props.aria),
                                     }), children: jsxRuntime.jsx("div", { className: "splide__track", children: jsxRuntime.jsx("div", { className: "splide__list", children: otherChildren.map((_, i) => (jsxRuntime.jsx("div", { className: "splide__slide", children: jsxRuntime.jsx("slot", { name: `slide-${i}` }) }, i))) }) }) }), (this.props.disablePagination ? this.props.disablePagination !== true : this.props.pagination) && (this.props.slidesPerPage === 'auto' || typeof this.props.slidesPerPage === 'object' || this.props.slidesPerPage < otherChildren.length) && (jsxRuntime.jsx("div", { className: "pagination-container", "aria-hidden": "true", children: jsxRuntime.jsx("div", { className: "pagination" }) }))] })] }), this.props.children] }));
     }

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

@@ -3159,17 +3159,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 {
@@ -3475,217 +3464,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',
@@ -4016,6 +3794,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)';
 
@@ -4235,6 +4245,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
@@ -4261,6 +4272,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,
@@ -4840,7 +4854,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');
@@ -4886,7 +4900,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',
@@ -4900,13 +4914,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 && {