@porsche-design-system/components-react 3.21.0 → 3.22.0-rc.1

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

@@ -31,7 +31,7 @@ function toPrimitive(t, r) {
   if ("object" != _typeof(t) || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
-    var i = e.call(t, r );
+    var i = e.call(t, r);
     if ("object" != _typeof(i)) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
@@ -2755,400 +2755,426 @@ function getAugmentedNamespace(n) {
 	return a;
 }
 
-var _tslib$1 = {};
+var _tslib = {};
 
-(function (exports) {
+var hasRequired_tslib;
 
-	Object.defineProperty(exports, '__esModule', { value: true });
+function require_tslib () {
+	if (hasRequired_tslib) return _tslib;
+	hasRequired_tslib = 1;
+	(function (exports) {
 
-	/*! *****************************************************************************
-	Copyright (c) Microsoft Corporation.
+		Object.defineProperty(exports, '__esModule', { value: true });
 
-	Permission to use, copy, modify, and/or distribute this software for any
-	purpose with or without fee is hereby granted.
+		/*! *****************************************************************************
+		Copyright (c) Microsoft Corporation.
 
-	THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-	REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-	AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-	INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-	LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-	OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-	PERFORMANCE OF THIS SOFTWARE.
-	***************************************************************************** */
+		Permission to use, copy, modify, and/or distribute this software for any
+		purpose with or without fee is hereby granted.
 
-	exports.__assign = function () {
-		exports.__assign =
-			Object.assign ||
-			function __assign(t) {
-				for (var s, i = 1, n = arguments.length; i < n; i++) {
-					s = arguments[i];
-					for (var p in s)
-						if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-				}
-				return t;
-			};
-		return exports.__assign.apply(this, arguments);
-	}; 
-} (_tslib$1));
-
-var require$$1 = /*@__PURE__*/getAugmentedNamespace(jss_esm);
-
-/**
- * The custom `sort` method for
- * for the [`css-mqpacker`](https://www.npmjs.com/package/css-mqpacker) or
- * [`pleeease`](https://www.npmjs.com/package/pleeease) which using `css-mqpacker`
- * or, perhaps, something else ))
- *
- * @module sort-css-media-queries
- * @author Oleg Dutchenko <dutchenko.o.wezom@gmail.com>
- * @version 1.5.0
- */
-
-// ----------------------------------------
-// Private
-// ----------------------------------------
-
-const minMaxWidth = /(!?\(\s*min(-device-)?-width)(.|\n)+\(\s*max(-device)?-width/i;
-const minWidth = /\(\s*min(-device)?-width/i;
-const maxMinWidth = /(!?\(\s*max(-device)?-width)(.|\n)+\(\s*min(-device)?-width/i;
-const maxWidth = /\(\s*max(-device)?-width/i;
-
-const isMinWidth = _testQuery(minMaxWidth, maxMinWidth, minWidth);
-const isMaxWidth = _testQuery(maxMinWidth, minMaxWidth, maxWidth);
-
-const minMaxHeight = /(!?\(\s*min(-device)?-height)(.|\n)+\(\s*max(-device)?-height/i;
-const minHeight = /\(\s*min(-device)?-height/i;
-const maxMinHeight = /(!?\(\s*max(-device)?-height)(.|\n)+\(\s*min(-device)?-height/i;
-const maxHeight = /\(\s*max(-device)?-height/i;
-
-const isMinHeight = _testQuery(minMaxHeight, maxMinHeight, minHeight);
-const isMaxHeight = _testQuery(maxMinHeight, minMaxHeight, maxHeight);
-
-const isPrint = /print/i;
-const isPrintOnly = /^print$/i;
-
-const maxValue = Number.MAX_VALUE;
-
-/**
- * Obtain the length of the media request in pixels.
- * Copy from original source `function inspectLength (length)`
- * {@link https://github.com/hail2u/node-css-mqpacker/blob/master/index.js#L58}
- * @private
- * @param {string} length
- * @return {number}
- */
-function _getQueryLength (length) {
-  length = /(-?\d*\.?\d+)(ch|em|ex|px|rem)/.exec(length);
-
-  if (length === null) {
-    return maxValue
-  }
-
-  let number = length[1];
-  const unit = length[2];
-
-  switch (unit) {
-    case 'ch':
-      number = parseFloat(number) * 8.8984375;
-      break
-
-    case 'em':
-    case 'rem':
-      number = parseFloat(number) * 16;
-      break
-
-    case 'ex':
-      number = parseFloat(number) * 8.296875;
-      break
+		THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+		REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+		AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+		INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+		LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+		OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+		PERFORMANCE OF THIS SOFTWARE.
+		***************************************************************************** */
 
-    case 'px':
-      number = parseFloat(number);
-      break
-  }
-
-  return +number
-}
-
-/**
- * Wrapper for creating test functions
- * @private
- * @param {RegExp} doubleTestTrue
- * @param {RegExp} doubleTestFalse
- * @param {RegExp} singleTest
- * @return {Function}
- */
-function _testQuery (doubleTestTrue, doubleTestFalse, singleTest) {
-  /**
-   * @param {string} query
-   * @return {boolean}
-   */
-  return function (query) {
-    if (doubleTestTrue.test(query)) {
-      return true
-    } else if (doubleTestFalse.test(query)) {
-      return false
-    }
-    return singleTest.test(query)
-  }
-}
-
-/**
- * @private
- * @param {string} a
- * @param {string} b
- * @return {number|null}
- */
-function _testIsPrint (a, b) {
-  const isPrintA = isPrint.test(a);
-  const isPrintOnlyA = isPrintOnly.test(a);
-
-  const isPrintB = isPrint.test(b);
-  const isPrintOnlyB = isPrintOnly.test(b);
-
-  if (isPrintA && isPrintB) {
-    if (!isPrintOnlyA && isPrintOnlyB) {
-      return 1
-    }
-    if (isPrintOnlyA && !isPrintOnlyB) {
-      return -1
-    }
-    return a.localeCompare(b)
-  }
-  if (isPrintA) {
-    return 1
-  }
-  if (isPrintB) {
-    return -1
-  }
-
-  return null
+		exports.__assign = function () {
+			exports.__assign =
+				Object.assign ||
+				function __assign(t) {
+					for (var s, i = 1, n = arguments.length; i < n; i++) {
+						s = arguments[i];
+						for (var p in s)
+							if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+					}
+					return t;
+				};
+			return exports.__assign.apply(this, arguments);
+		}; 
+	} (_tslib));
+	return _tslib;
 }
 
-// ----------------------------------------
-// Public
-// ----------------------------------------
-
-/**
- * Sorting an array with media queries
- * according to the mobile-first methodology.
- * @param {string} a
- * @param {string} b
- * @return {number} 1 / 0 / -1
- */
-function sortCSSmq$1 (a, b) {
-  const testIsPrint = _testIsPrint(a, b);
-  if (testIsPrint !== null) {
-    return testIsPrint
-  }
+var require$$1 = /*@__PURE__*/getAugmentedNamespace(jss_esm);
 
-  const minA = isMinWidth(a) || isMinHeight(a);
-  const maxA = isMaxWidth(a) || isMaxHeight(a);
+var sortCssMediaQueries;
+var hasRequiredSortCssMediaQueries;
+
+function requireSortCssMediaQueries () {
+	if (hasRequiredSortCssMediaQueries) return sortCssMediaQueries;
+	hasRequiredSortCssMediaQueries = 1;
+
+	/**
+	 * The custom `sort` method for
+	 * for the [`css-mqpacker`](https://www.npmjs.com/package/css-mqpacker) or
+	 * [`pleeease`](https://www.npmjs.com/package/pleeease) which using `css-mqpacker`
+	 * or, perhaps, something else ))
+	 *
+	 * @module sort-css-media-queries
+	 * @author Oleg Dutchenko <dutchenko.o.wezom@gmail.com>
+	 * @version 1.5.0
+	 */
+
+	// ----------------------------------------
+	// Private
+	// ----------------------------------------
+
+	const minMaxWidth = /(!?\(\s*min(-device-)?-width)(.|\n)+\(\s*max(-device)?-width/i;
+	const minWidth = /\(\s*min(-device)?-width/i;
+	const maxMinWidth = /(!?\(\s*max(-device)?-width)(.|\n)+\(\s*min(-device)?-width/i;
+	const maxWidth = /\(\s*max(-device)?-width/i;
+
+	const isMinWidth = _testQuery(minMaxWidth, maxMinWidth, minWidth);
+	const isMaxWidth = _testQuery(maxMinWidth, minMaxWidth, maxWidth);
+
+	const minMaxHeight = /(!?\(\s*min(-device)?-height)(.|\n)+\(\s*max(-device)?-height/i;
+	const minHeight = /\(\s*min(-device)?-height/i;
+	const maxMinHeight = /(!?\(\s*max(-device)?-height)(.|\n)+\(\s*min(-device)?-height/i;
+	const maxHeight = /\(\s*max(-device)?-height/i;
+
+	const isMinHeight = _testQuery(minMaxHeight, maxMinHeight, minHeight);
+	const isMaxHeight = _testQuery(maxMinHeight, minMaxHeight, maxHeight);
+
+	const isPrint = /print/i;
+	const isPrintOnly = /^print$/i;
+
+	const maxValue = Number.MAX_VALUE;
+
+	/**
+	 * Obtain the length of the media request in pixels.
+	 * Copy from original source `function inspectLength (length)`
+	 * {@link https://github.com/hail2u/node-css-mqpacker/blob/master/index.js#L58}
+	 * @private
+	 * @param {string} length
+	 * @return {number}
+	 */
+	function _getQueryLength (length) {
+	  length = /(-?\d*\.?\d+)(ch|em|ex|px|rem)/.exec(length);
+
+	  if (length === null) {
+	    return maxValue
+	  }
+
+	  let number = length[1];
+	  const unit = length[2];
+
+	  switch (unit) {
+	    case 'ch':
+	      number = parseFloat(number) * 8.8984375;
+	      break
+
+	    case 'em':
+	    case 'rem':
+	      number = parseFloat(number) * 16;
+	      break
+
+	    case 'ex':
+	      number = parseFloat(number) * 8.296875;
+	      break
+
+	    case 'px':
+	      number = parseFloat(number);
+	      break
+	  }
+
+	  return +number
+	}
 
-  const minB = isMinWidth(b) || isMinHeight(b);
-  const maxB = isMaxWidth(b) || isMaxHeight(b);
+	/**
+	 * Wrapper for creating test functions
+	 * @private
+	 * @param {RegExp} doubleTestTrue
+	 * @param {RegExp} doubleTestFalse
+	 * @param {RegExp} singleTest
+	 * @return {Function}
+	 */
+	function _testQuery (doubleTestTrue, doubleTestFalse, singleTest) {
+	  /**
+	   * @param {string} query
+	   * @return {boolean}
+	   */
+	  return function (query) {
+	    if (doubleTestTrue.test(query)) {
+	      return true
+	    } else if (doubleTestFalse.test(query)) {
+	      return false
+	    }
+	    return singleTest.test(query)
+	  }
+	}
 
-  if (minA && maxB) {
-    return -1
-  }
-  if (maxA && minB) {
-    return 1
-  }
+	/**
+	 * @private
+	 * @param {string} a
+	 * @param {string} b
+	 * @return {number|null}
+	 */
+	function _testIsPrint (a, b) {
+	  const isPrintA = isPrint.test(a);
+	  const isPrintOnlyA = isPrintOnly.test(a);
+
+	  const isPrintB = isPrint.test(b);
+	  const isPrintOnlyB = isPrintOnly.test(b);
+
+	  if (isPrintA && isPrintB) {
+	    if (!isPrintOnlyA && isPrintOnlyB) {
+	      return 1
+	    }
+	    if (isPrintOnlyA && !isPrintOnlyB) {
+	      return -1
+	    }
+	    return a.localeCompare(b)
+	  }
+	  if (isPrintA) {
+	    return 1
+	  }
+	  if (isPrintB) {
+	    return -1
+	  }
+
+	  return null
+	}
 
-  let lengthA = _getQueryLength(a);
-  let lengthB = _getQueryLength(b);
+	// ----------------------------------------
+	// Public
+	// ----------------------------------------
+
+	/**
+	 * Sorting an array with media queries
+	 * according to the mobile-first methodology.
+	 * @param {string} a
+	 * @param {string} b
+	 * @return {number} 1 / 0 / -1
+	 */
+	function sortCSSmq (a, b) {
+	  const testIsPrint = _testIsPrint(a, b);
+	  if (testIsPrint !== null) {
+	    return testIsPrint
+	  }
+
+	  const minA = isMinWidth(a) || isMinHeight(a);
+	  const maxA = isMaxWidth(a) || isMaxHeight(a);
+
+	  const minB = isMinWidth(b) || isMinHeight(b);
+	  const maxB = isMaxWidth(b) || isMaxHeight(b);
+
+	  if (minA && maxB) {
+	    return -1
+	  }
+	  if (maxA && minB) {
+	    return 1
+	  }
+
+	  let lengthA = _getQueryLength(a);
+	  let lengthB = _getQueryLength(b);
+
+	  if (lengthA === maxValue && lengthB === maxValue) {
+	    return a.localeCompare(b)
+	  } else if (lengthA === maxValue) {
+	    return 1
+	  } else if (lengthB === maxValue) {
+	    return -1
+	  }
+
+	  if (lengthA > lengthB) {
+	    if (maxA) {
+	      return -1
+	    }
+	    return 1
+	  }
+
+	  if (lengthA < lengthB) {
+	    if (maxA) {
+	      return 1
+	    }
+	    return -1
+	  }
+
+	  return a.localeCompare(b)
+	}
 
-  if (lengthA === maxValue && lengthB === maxValue) {
-    return a.localeCompare(b)
-  } else if (lengthA === maxValue) {
-    return 1
-  } else if (lengthB === maxValue) {
-    return -1
-  }
+	/**
+	 * Sorting an array with media queries
+	 * according to the desktop-first methodology.
+	 * @param {string} a
+	 * @param {string} b
+	 * @return {number} 1 / 0 / -1
+	 */
+	sortCSSmq.desktopFirst = function (a, b) {
+	  const testIsPrint = _testIsPrint(a, b);
+	  if (testIsPrint !== null) {
+	    return testIsPrint
+	  }
+
+	  const minA = isMinWidth(a) || isMinHeight(a);
+	  const maxA = isMaxWidth(a) || isMaxHeight(a);
+
+	  const minB = isMinWidth(b) || isMinHeight(b);
+	  const maxB = isMaxWidth(b) || isMaxHeight(b);
+
+	  if (minA && maxB) {
+	    return 1
+	  }
+	  if (maxA && minB) {
+	    return -1
+	  }
+
+	  const lengthA = _getQueryLength(a);
+	  const lengthB = _getQueryLength(b);
+
+	  if (lengthA === maxValue && lengthB === maxValue) {
+	    return a.localeCompare(b)
+	  } else if (lengthA === maxValue) {
+	    return 1
+	  } else if (lengthB === maxValue) {
+	    return -1
+	  }
+
+	  if (lengthA > lengthB) {
+	    if (maxA) {
+	      return -1
+	    }
+	    return 1
+	  }
+
+	  if (lengthA < lengthB) {
+	    if (maxA) {
+	      return 1
+	    }
+	    return -1
+	  }
+
+	  return -(a.localeCompare(b))
+	};
 
-  if (lengthA > lengthB) {
-    if (maxA) {
-      return -1
-    }
-    return 1
-  }
+	// ----------------------------------------
+	// Exports
+	// ----------------------------------------
 
-  if (lengthA < lengthB) {
-    if (maxA) {
-      return 1
-    }
-    return -1
-  }
-
-  return a.localeCompare(b)
+	sortCssMediaQueries = sortCSSmq;
+	return sortCssMediaQueries;
 }
 
-/**
- * Sorting an array with media queries
- * according to the desktop-first methodology.
- * @param {string} a
- * @param {string} b
- * @return {number} 1 / 0 / -1
- */
-sortCSSmq$1.desktopFirst = function (a, b) {
-  const testIsPrint = _testIsPrint(a, b);
-  if (testIsPrint !== null) {
-    return testIsPrint
-  }
-
-  const minA = isMinWidth(a) || isMinHeight(a);
-  const maxA = isMaxWidth(a) || isMaxHeight(a);
-
-  const minB = isMinWidth(b) || isMinHeight(b);
-  const maxB = isMaxWidth(b) || isMaxHeight(b);
-
-  if (minA && maxB) {
-    return 1
-  }
-  if (maxA && minB) {
-    return -1
-  }
+var dist;
+var hasRequiredDist;
 
-  const lengthA = _getQueryLength(a);
-  const lengthB = _getQueryLength(b);
-
-  if (lengthA === maxValue && lengthB === maxValue) {
-    return a.localeCompare(b)
-  } else if (lengthA === maxValue) {
-    return 1
-  } else if (lengthB === maxValue) {
-    return -1
-  }
+function requireDist () {
+	if (hasRequiredDist) return dist;
+	hasRequiredDist = 1;
 
-  if (lengthA > lengthB) {
-    if (maxA) {
-      return -1
-    }
-    return 1
-  }
+	var _tslib = require_tslib();
+	var jss = require$$1;
+	var sortCSSmq = requireSortCssMediaQueries();
 
-  if (lengthA < lengthB) {
-    if (maxA) {
-      return 1
-    }
-    return -1
-  }
-
-  return -(a.localeCompare(b))
-};
-
-// ----------------------------------------
-// Exports
-// ----------------------------------------
-
-var sortCssMediaQueries = sortCSSmq$1;
-
-var _tslib = _tslib$1;
-var jss$1 = require$$1;
-var sortCSSmq = sortCssMediaQueries;
-
-function _interopDefaultLegacy(e) {
-	return e && typeof e === 'object' && 'default' in e ? e : { default: e };
-}
+	function _interopDefaultLegacy(e) {
+		return e && typeof e === 'object' && 'default' in e ? e : { default: e };
+	}
 
-var sortCSSmq__default = /*#__PURE__*/ _interopDefaultLegacy(sortCSSmq);
+	var sortCSSmq__default = /*#__PURE__*/ _interopDefaultLegacy(sortCSSmq);
 
-function isPlainObject(sample) {
-	return (
-		sample !== null && typeof sample === 'object' && Array.isArray(sample) === false
-	);
-}
-var UN_QUERIED = '__UN_QUERIED';
-function recursiveInnerAndGetQueries(pluginOptions, rules) {
-	var queries = {
-		groups: {},
-		groupsSortNames: []
-	};
-	for (var index = 0; index < rules.length; index++) {
-		var rule = rules[index];
-		var query =
-			rule.type === 'conditional' && typeof rule.query === 'string'
-				? rule.query
-				: UN_QUERIED;
-		if (!queries.groups.hasOwnProperty(query)) {
-			queries.groupsSortNames.push(query);
-			queries.groups[query] = [];
-		}
-		queries.groups[query].push(index);
-		// eslint-disable-next-line @typescript-eslint/no-use-before-define
-		recursive(pluginOptions, rule);
+	function isPlainObject(sample) {
+		return (
+			sample !== null && typeof sample === 'object' && Array.isArray(sample) === false
+		);
 	}
-	queries.groupsSortNames.sort(function (a, b) {
-		var aWeight = a === UN_QUERIED ? 0 : a.length;
-		var bWeight = b === UN_QUERIED ? 0 : b.length;
-		if (aWeight > 0 && bWeight > 0) {
-			if (pluginOptions.desktopFirst) {
-				return sortCSSmq__default['default'].desktopFirst(a, b);
-			} else {
-				return sortCSSmq__default['default'](a, b);
+	var UN_QUERIED = '__UN_QUERIED';
+	function recursiveInnerAndGetQueries(pluginOptions, rules) {
+		var queries = {
+			groups: {},
+			groupsSortNames: []
+		};
+		for (var index = 0; index < rules.length; index++) {
+			var rule = rules[index];
+			var query =
+				rule.type === 'conditional' && typeof rule.query === 'string'
+					? rule.query
+					: UN_QUERIED;
+			if (!queries.groups.hasOwnProperty(query)) {
+				queries.groupsSortNames.push(query);
+				queries.groups[query] = [];
 			}
-		} else {
-			return aWeight - bWeight;
+			queries.groups[query].push(index);
+			// eslint-disable-next-line @typescript-eslint/no-use-before-define
+			recursive(pluginOptions, rule);
 		}
-	});
-	return queries;
-}
-function recursive(pluginOptions, data) {
-	if (isPlainObject(data) && data.rules instanceof jss$1.RuleList) {
-		data.rules.toString = function (options) {
-			if (options === void 0) {
-				options = {};
-			}
-			var str = '';
-			var sheet = this.options.sheet;
-			var link = sheet ? sheet.options.link : false;
-			var _a = recursiveInnerAndGetQueries(pluginOptions, this.index),
-				groups = _a.groups,
-				groupsSortNames = _a.groupsSortNames;
-			for (var i = 0; i < groupsSortNames.length; i++) {
-				var groupName = groupsSortNames[i];
-				var group = groups[groupsSortNames[i]];
-				if (groupName !== UN_QUERIED && pluginOptions.combineMediaQueries) {
-					str += '\n' + groupName + ' {';
-					for (var i_1 = 0; i_1 < group.length; i_1++) {
-						var rule = this.index[group[i_1]];
-						var css = rule.rules.toString(
-							_tslib.__assign(_tslib.__assign({}, options), {
-								indent: (options.indent || 0) + 1
-							})
-						);
-						if (!css && !link) continue;
-						if (str) str += '\n';
-						str += css;
-					}
-					str += '\n}\n';
+		queries.groupsSortNames.sort(function (a, b) {
+			var aWeight = a === UN_QUERIED ? 0 : a.length;
+			var bWeight = b === UN_QUERIED ? 0 : b.length;
+			if (aWeight > 0 && bWeight > 0) {
+				if (pluginOptions.desktopFirst) {
+					return sortCSSmq__default['default'].desktopFirst(a, b);
 				} else {
-					for (var i_2 = 0; i_2 < group.length; i_2++) {
-						var rule = this.index[group[i_2]];
-						var css = rule.toString(options);
-						if (!css && !link) continue;
-						if (str) str += '\n';
-						str += css;
-					}
+					return sortCSSmq__default['default'](a, b);
 				}
+			} else {
+				return aWeight - bWeight;
 			}
-			return str;
-		};
+		});
+		return queries;
 	}
-}
-function jssCombineAndSortMQ(options) {
-	if (options === void 0) {
-		options = {};
+	function recursive(pluginOptions, data) {
+		if (isPlainObject(data) && data.rules instanceof jss.RuleList) {
+			data.rules.toString = function (options) {
+				if (options === void 0) {
+					options = {};
+				}
+				var str = '';
+				var sheet = this.options.sheet;
+				var link = sheet ? sheet.options.link : false;
+				var _a = recursiveInnerAndGetQueries(pluginOptions, this.index),
+					groups = _a.groups,
+					groupsSortNames = _a.groupsSortNames;
+				for (var i = 0; i < groupsSortNames.length; i++) {
+					var groupName = groupsSortNames[i];
+					var group = groups[groupsSortNames[i]];
+					if (groupName !== UN_QUERIED && pluginOptions.combineMediaQueries) {
+						str += '\n' + groupName + ' {';
+						for (var i_1 = 0; i_1 < group.length; i_1++) {
+							var rule = this.index[group[i_1]];
+							var css = rule.rules.toString(
+								_tslib.__assign(_tslib.__assign({}, options), {
+									indent: (options.indent || 0) + 1
+								})
+							);
+							if (!css && !link) continue;
+							if (str) str += '\n';
+							str += css;
+						}
+						str += '\n}\n';
+					} else {
+						for (var i_2 = 0; i_2 < group.length; i_2++) {
+							var rule = this.index[group[i_2]];
+							var css = rule.toString(options);
+							if (!css && !link) continue;
+							if (str) str += '\n';
+							str += css;
+						}
+					}
+				}
+				return str;
+			};
+		}
 	}
-	return {
-		onProcessSheet: function (sheet) {
-			recursive(options, sheet);
+	function jssCombineAndSortMQ(options) {
+		if (options === void 0) {
+			options = {};
 		}
-	};
-}
+		return {
+			onProcessSheet: function (sheet) {
+				recursive(options, sheet);
+			}
+		};
+	}
 
-var dist = jssCombineAndSortMQ;
+	dist = jssCombineAndSortMQ;
+	return dist;
+}
 
-var jssPluginSortMediaQueries = /*@__PURE__*/getDefaultExportFromCjs(dist);
+var distExports = requireDist();
+var jssPluginSortMediaQueries = /*@__PURE__*/getDefaultExportFromCjs(distExports);
 
 const isDisabledOrLoading = (disabled, loading) => {
     return disabled || loading;
@@ -3166,30 +3192,10 @@ const darken = (hsl) => {
 };
 const changeColor = (hsl, lightness) => {
     return hsl.replace(/\s(\d+)(%?)\//, (_, p1, p2) => {
-        return ` ${Math.min(Math.max(parseInt(p1, 10) + lightness, 0), 100)}${p2}/`;
+        return ` ${Math.min(Math.max(Number.parseInt(p1, 10) + lightness, 0), 100)}${p2}/`;
     });
 };
 
-const parseJSON = (prop) => {
-    if (typeof prop === 'string') {
-        try {
-            // prop is potentially JSON parsable string, e.g. "{ base: 'block', l: 'inline' }" or "true" or "false"
-            return JSON.parse(prop
-                .replace(/'/g, '"') // convert single quotes to double quotes
-                .replace(/[\s"]?([a-z]+)[\s"]?:([^//])/g, '"$1":$2') // wrap keys in double quotes if they don't have them but ignore potential urls
-            );
-        }
-        catch {
-            // prop is string, e.g. "block" or "inline"
-            return prop;
-        }
-    }
-    else {
-        // prop is object, e.g. { base: 'block', l: 'inline' } or number, e.g. 123 or boolean, e.g. true
-        return prop;
-    }
-};
-
 const borderRadiusSmall = '4px';
 
 const borderRadiusMedium = '8px';
@@ -3414,10 +3420,6 @@ const spacingFluidSmall = 'clamp(8px, 0.5vw + 6px, 16px)';
 
 const spacingFluidLarge = 'clamp(32px, 2.75vw + 23px, 76px)';
 
-const themeLightBackgroundShading = 'rgba(1, 2, 5, 0.67)';
-
-const themeDarkBackgroundShading = 'rgba(38, 38, 41, 0.67)';
-
 const _displayFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightRegular} `;
 const _displayFontPartB = `/${fontLineHeight} ${fontFamily}`;
 
@@ -3619,8 +3621,11 @@ const dismissButtonJssStyle = {
 };
 const cssVariableTransitionDuration = '--p-transition-duration';
 const cssVariableAnimationDuration = '--p-animation-duration';
+const getAnimation = (name, duration = 'short', easing = 'base') => {
+    return `${name} var(${cssVariableAnimationDuration}, ${motionDurationMap[duration]}) ${motionEasingMap[easing]}`;
+};
 const getTransition = (cssProperty, duration = 'short', easing = 'base', delay) => {
-    return `${cssProperty} var(${cssVariableTransitionDuration}, ${motionDurationMap[duration]}) ${motionEasingMap[easing]}${delay ? ` var(${cssVariableTransitionDuration}, ${motionDurationMap[delay]})` : ''}`;
+    return `${cssProperty} var(${cssVariableTransitionDuration}, ${motionDurationMap[duration]}) ${motionEasingMap[easing]}${''}`;
 };
 const addImportantToRule = (value) => `${value} !important`;
 const addImportantToEachRule = (input) => {
@@ -3628,6 +3633,7 @@ const addImportantToEachRule = (input) => {
         ? result
         : // @ts-expect-error: Type string can't be used to index type JssStyle
             ((result[key] =
+                // biome-ignore lint/style/noCommaOperator: to be refactored
                 typeof value === 'object' ? addImportantToEachRule(value) : addImportantToRule(value)),
                 result), {});
 };
@@ -3700,43 +3706,6 @@ const getHiddenTextJssStyle = (isHidden = true, isShownJssStyle) => {
             ...isShownJssStyle,
         };
 };
-// TODO: migrate flyout-multilevel to use shared backdrop of dialog-styles.ts
-/**
- * Generates JSS styles for a frosted glass background.
- * @param {boolean} isVisible - Determines if the frosted glass effect is visible.
- * @param {number} zIndex - The z-index to be used.
- * @param {Theme} theme - The theme to be used.
- * @param {string} duration - The duration of the transition animation.
- * @param {'blur' | 'shading'} backdrop - The backdrop variant.
- * @returns {JssStyle} - The JSS styles for the frosted glass backdrop.
- */
-const getBackdropJssStyle = (isVisible, zIndex, theme, duration = 'long') => {
-    return {
-        position: 'fixed',
-        inset: 0,
-        zIndex,
-        // TODO: background shading is missing in getThemedColors(theme).backgroundShading
-        background: isThemeDark(theme) ? themeDarkBackgroundShading : themeLightBackgroundShading,
-        ...prefersColorSchemeDarkMediaQuery(theme, {
-            background: themeDarkBackgroundShading,
-        }),
-        ...(isVisible
-            ? {
-                visibility: 'inherit',
-                pointerEvents: 'auto',
-                ...frostedGlassStyle,
-                opacity: 1,
-            }
-            : {
-                visibility: 'hidden', // element shall not be tabbable after fade out transition has finished
-                pointerEvents: 'none',
-                WebkitBackdropFilter: 'blur(0px)',
-                backdropFilter: 'blur(0px)',
-                opacity: 0,
-            }),
-        transition: `${getTransition('opacity', duration)}, ${getTransition('backdrop-filter', duration)}, ${getTransition('-webkit-backdrop-filter', duration)}, visibility 0s linear var(${cssVariableTransitionDuration}, ${isVisible ? '0s' : motionDurationMap[duration]})`,
-    };
-};
 
 const hostHiddenStyles = {
     '&([hidden])': {
@@ -3775,6 +3744,26 @@ const forcedColorsMediaQuery = (style) => {
     return { '@media (forced-colors: active)': style };
 };
 
+const parseJSON = (prop) => {
+    if (typeof prop === 'string') {
+        try {
+            // prop is potentially JSON parsable string, e.g. "{ base: 'block', l: 'inline' }" or "true" or "false"
+            return JSON.parse(prop
+                .replace(/'/g, '"') // convert single quotes to double quotes
+                .replace(/[\s"]?([a-z]+)[\s"]?:([^//])/g, '"$1":$2') // wrap keys in double quotes if they don't have them but ignore potential urls
+            );
+        }
+        catch {
+            // prop is string, e.g. "block" or "inline"
+            return prop;
+        }
+    }
+    else {
+        // prop is object, e.g. { base: 'block', l: 'inline' } or number, e.g. 123 or boolean, e.g. true
+        return prop;
+    }
+};
+
 // NOTE: handpicked selection of plugins from jss-preset-default
 const jss = createJss({
     plugins: [
@@ -3818,6 +3807,7 @@ const isObject = (obj) => typeof obj === 'object' && !Array.isArray(obj);
 // NOTE: taken from https://stackoverflow.com/a/48218209
 const mergeDeep = (...objects) => {
     return objects.reduce((prev, obj) => {
+        // biome-ignore lint/complexity/noForEach: to be refactored
         Object.keys(obj).forEach((key) => {
             const pVal = prev[key];
             const oVal = obj[key];
@@ -3845,12 +3835,13 @@ const mergeDeep = (...objects) => {
 const attributeMutationMap = new Map();
 hasWindow &&
     new MutationObserver((mutations) => {
-        mutations
+        for (const mutation of 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)?.());
+            .filter((mutation, idx, arr) => arr.findIndex((m) => m.target === mutation.target) === idx)) {
+            attributeMutationMap.get(mutation.target)?.();
+        }
     });
 
 const mediaQueries = Object.values(breakpoint).map((v) => `(min-width:${v}px)`);
@@ -3872,17 +3863,14 @@ const observedNodesMap = new Map();
 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) {
+        if (observedNodesMap.size > 0) {
             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)?.());
-            });
+            // remove duplicates so we execute callback only once per node
+            for (const mutation of mutations.filter((mutation, idx, arr) => arr.findIndex((m) => m.target === mutation.target) === idx)) {
+                for (const node of observedNodes.filter((node) => node.contains(mutation.target))) {
+                    observedNodesMap.get(node)?.();
+                }
+            }
         }
     });
 
@@ -3921,7 +3909,7 @@ const supportsNativePopover = () => {
     if (!hasWindow) {
         return false;
     }
-    return HTMLElement.prototype.hasOwnProperty('popover');
+    return Object.prototype.hasOwnProperty.call(HTMLElement.prototype, 'popover');
 };
 // determine it once
 supportsNativePopover();
@@ -3948,8 +3936,7 @@ const formatObjectOutput = (value) => {
         .replace(/(})/g, ' $1') // add space before following: }
         .replace(/^"(.+)"$/, '$1'); // remove wrapping double quotes
 };
-'value, ' +
-    formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {})).replace(/"/g, '');
+`value, ${formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {})).replace(/"/g, '')}`;
 
 const getComponentCss$19 = (size, compact, open, theme, sticky) => {
     const { primaryColor, hoverColor, contrastLowColor, backgroundColor } = getThemedColors(theme);
@@ -4098,7 +4085,6 @@ const getComponentCss$19 = (size, compact, open, theme, sticky) => {
 };
 
 const TOAST_Z_INDEX = 999999;
-const FLYOUT_Z_INDEX = 99998;
 const POPOVER_Z_INDEX = 9999;
 const BANNER_Z_INDEX = 99;
 
@@ -4873,6 +4859,9 @@ const getComponentCss$13 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
                     display: 'none',
                 },
             },
+            '&:focus': {
+                outline: 'none',
+            },
         },
         blur: {
             zIndex: -1,
@@ -5034,6 +5023,9 @@ const getComponentCss$13 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
                 display: 'block',
                 padding: spacingBase,
             },
+            '&:focus': {
+                outline: 'none',
+            },
         },
         'flyout-start': {
             '--p-flyout-width': '100dvw',
@@ -5125,7 +5117,7 @@ const getComponentCss$12 = (gradientColor, hasHeading, hasDescription, hasContro
             },
             ...preventFoucOfNestedElementsStyles,
             ...(hasControlsSlot && {
-                ['slot[name="controls"]']: {
+                'slot[name="controls"]': {
                     display: 'block',
                     gridColumnStart: 1,
                     gridRowStart: 3,
@@ -5161,10 +5153,10 @@ const getComponentCss$12 = (gradientColor, hasHeading, hasDescription, hasContro
                 ...(hasHeading && {
                     [selectorHeading]: {
                         maxWidth: '56.25rem',
-                        margin: `0 0 ${!hasDescription ? spacingFluidMedium : 0}`,
+                        margin: `0 0 ${hasDescription ? 0 : spacingFluidMedium}`,
                         ...(headingSize === 'xx-large' ? headingXXLargeStyle : headingXLargeStyle),
                     },
-                    ['::slotted([slot=heading])']: {
+                    '::slotted([slot=heading])': {
                         margin: 0, // reset ua-style
                         ...(headingSize === 'xx-large' ? headingXXLargeStyle : headingXLargeStyle),
                     },
@@ -5749,8 +5741,19 @@ const getComponentCss$10 = (hideLabel, state, isDisabled, isLoading, compact, th
                     backgroundSize: 'cover',
                 }),
             },
-            ...(!isLoading
+            ...(isLoading
                 ? {
+                    'input:checked': {
+                        // background-image is merged in later
+                        borderColor: checkedColor,
+                        backgroundColor: checkedColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            borderColor: checkedColorDark,
+                            backgroundColor: checkedColorDark,
+                        }),
+                    },
+                }
+                : {
                     'input:checked': {
                         borderColor: checkedColor,
                         backgroundColor: checkedColor,
@@ -5785,17 +5788,6 @@ const getComponentCss$10 = (hideLabel, state, isDisabled, isLoading, compact, th
                                 backgroundImage: getIndeterminateSVGBackgroundImage('white'),
                             })),
                     },
-                }
-                : {
-                    'input:checked': {
-                        // background-image is merged in later
-                        borderColor: checkedColor,
-                        backgroundColor: checkedColor,
-                        ...prefersColorSchemeDarkMediaQuery(theme, {
-                            borderColor: checkedColorDark,
-                            backgroundColor: checkedColorDark,
-                        }),
-                    },
                 }),
             ...(!disabledOrLoading &&
                 !isHighContrastMode &&
@@ -6225,337 +6217,493 @@ const getComponentCss$U = (inline, wrap, direction, justifyContent, alignItems,
     });
 };
 
-const getFlyoutDialogResetJssStyle = () => {
-    return {
-        position: 'fixed',
-        height: '100dvh',
-        maxHeight: '100dvh',
-        margin: '0',
-        padding: '0',
-        border: '0',
-        visibility: 'inherit',
-        outline: '0',
-    };
-};
-
-const cssVariableVisibility = '--p-internal-flyout-multilevel-visibility';
-const cssVariableVisibilityTransitionDuration = '--p-internal-flyout-multilevel-visibility-transition-duration';
-const frostedGlassHeaderHeight = '4rem';
-const frostedGlassBackgroundColorLight$1 = 'rgba(255, 255, 255, 0.79)';
-const frostedGlassBackgroundColorDark$1 = 'rgba(14, 14, 18, 0.79)';
-const scrollerWidthEnhancedView = 'clamp(338px, 10.52vw + 258px, 460px)';
-const mediaQueryEnhancedView = getMediaQueryMin('s');
-const getComponentCss$T = (isPrimaryScrollerVisible, isSecondaryScrollerVisible, theme) => {
-    const { backgroundColor } = getThemedColors(theme);
-    const { backgroundColor: backgroundColorDark } = getThemedColors('dark');
-    const frostedGlassBackgroundColor = isThemeDark(theme)
-        ? frostedGlassBackgroundColorDark$1
-        : frostedGlassBackgroundColorLight$1;
+const scrollerWidthDesktop = 'clamp(338px, 210px + 18vw, 640px)';
+const mediaQueryMobile = getMediaQueryMax('s');
+const mediaQueryDesktop = getMediaQueryMin('s');
+const dialogDurationOpen = 'moderate';
+const backdropDurationOpen = 'long';
+const easingOpen = 'in';
+const dialogDurationClose = 'short';
+const backdropDurationClose = 'moderate';
+const easingClose = 'out';
+const getComponentCss$T = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
+    const { backgroundColor, backgroundSurfaceColor, backgroundShadingColor } = getThemedColors(theme);
+    const { backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, backgroundShadingColor: backgroundShadingColorDark, } = getThemedColors('dark');
     return getCss({
         '@global': {
+            '@keyframes slide-up-mobile': {
+                from: { transform: `translate3d(0,${spacingFluidMedium},0)` },
+                to: { transform: 'translate3d(0,0,0)' },
+            },
+            // unfortunately, it's not possible to use transform animation like in mobile view
+            // because then a new stacking context within scroll container would be initialized
+            // causing the slotted scroll container to become invisible
+            '@keyframes slide-up-desktop': {
+                from: { marginBlockStart: spacingFluidMedium },
+                to: { marginBlockStart: '0px' },
+            },
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    ...(!isPrimaryScrollerVisible && {
-                        [cssVariableVisibility]: 'hidden',
-                        [cssVariableVisibilityTransitionDuration]: motionDurationLong,
-                    }),
-                    ...getBackdropJssStyle(isPrimaryScrollerVisible, FLYOUT_Z_INDEX, theme),
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
             ...preventFoucOfNestedElementsStyles,
             dialog: {
-                ...getFlyoutDialogResetJssStyle(),
-                inset: '0',
-                display: 'grid',
-                overflow: 'hidden',
-                width: 'auto',
-                maxWidth: '100vw',
-                background: 'none',
-                ...(isPrimaryScrollerVisible
+                all: 'unset',
+                position: 'fixed',
+                inset: 0,
+                zIndex: 999999999, // fallback when dialog isn't rendered on #top-layer, e.g. relevant in ssr context or fade-out transition in Safari or Firefox
+                outline: 0, // prevents outline in case dialog becomes focusable
+                ...(isOpen
                     ? {
-                        transform: 'translate3d(0, 0, 0)',
-                        transition: `${getTransition('transform', 'long', 'in')}`,
+                        visibility: 'inherit',
+                        ...frostedGlassStyle,
+                        background: backgroundShadingColor,
+                        transition: `${getTransition('background', backdropDurationOpen, easingOpen)}, ${getTransition('backdrop-filter', backdropDurationOpen, easingOpen)}, ${getTransition('-webkit-backdrop-filter', backdropDurationOpen, easingOpen)}`,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            background: backgroundShadingColorDark,
+                        }),
                     }
                     : {
-                        transform: 'translate3d(-100%, 0, 0)',
-                        transition: `${getTransition('transform', 'long', 'out')}`,
+                        visibility: 'hidden',
+                        transition: `visibility 0s linear var(${cssVariableTransitionDuration}, ${motionDurationMap[backdropDurationClose]}), ${getTransition('overlay', backdropDurationClose, easingClose)} allow-discrete, ${getTransition('background', backdropDurationClose, easingClose)}, ${getTransition('backdrop-filter', backdropDurationClose, easingClose)}, ${getTransition('-webkit-backdrop-filter', backdropDurationClose, easingClose)}`,
                     }),
-                [mediaQueryEnhancedView]: {
-                    gridTemplateColumns: `repeat(${isSecondaryScrollerVisible ? 2 : 1}, ${scrollerWidthEnhancedView}) auto`,
-                    gridTemplateRows: '100vh',
-                    insetInlineEnd: 'auto', // to have correct dialog dimensions for ideal transitions
+                '&::backdrop': {
+                    display: 'none',
                 },
-                '&:dir(rtl)': {
-                    ...(!isPrimaryScrollerVisible && {
-                        transform: 'translate3d(100%, 0, 0)', // use correct transitions in rtl mode
+            },
+            slot: {
+                [mediaQueryMobile]: {
+                    display: 'contents',
+                    ...(!isSecondaryScrollerVisible && {
+                        zIndex: 0,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: spacingFluidXSmall,
+                        gridArea: '4/2/auto/-2',
+                        height: 'fit-content', // ensures padding bottom is added instead of subtracted because of grid context
+                        paddingBlockEnd: spacingFluidLarge,
+                        ...(isPrimary && {
+                            animation: getAnimation('slide-up-mobile', 'moderate', 'base'),
+                        }),
                     }),
                 },
-                '&::backdrop': {
-                    // to improve browser backwards compatibility we visually style the backdrop on the :host,
-                    // although it's not on the #top-layer like it would be for modern browsers supporting ::backdrop
-                    opacity: 0, // to support backdrop click for modern browsers supporting ::backdrop
+                [mediaQueryDesktop]: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: isPrimary ? spacingFluidXSmall : spacingFluidMedium,
+                    gridArea: '2/2/auto/-2',
+                    height: 'fit-content', // ensures padding bottom is added instead of subtracted because of grid context
+                    paddingBlockEnd: spacingFluidLarge,
+                    ...(isPrimary && {
+                        animation: getAnimation('slide-up-desktop', 'moderate', 'base'),
+                    }),
                 },
             },
-        },
-        scroller: {
-            gridArea: '1/1',
-            overflow: 'auto',
-            // cssVariableVisibility ensures secondary scroller is not tabbable when whole flyout-multilevel is closed
-            // on mobile we need to decide if secondary scroller needs to be visible or not, on desktop it's not necessary but also doesn't harm
-            visibility: `var(${cssVariableVisibility},${isSecondaryScrollerVisible ? 'hidden' : 'inherit'})`,
-            transition: `${getTransition('left', 'long', isSecondaryScrollerVisible ? 'in' : 'out')}, visibility 0s linear var(${cssVariableTransitionDuration}, ${!isPrimaryScrollerVisible || isSecondaryScrollerVisible ? motionDurationLong : '0s'})`,
-            // it's important to define background-color for each scroller to have correct scrollbar coloring
-            backgroundColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                backgroundColor: backgroundColorDark,
+            ...(isSecondaryScrollerVisible && {
+                '::slotted(*:not([primary],[secondary],[cascade]))': {
+                    [mediaQueryMobile]: {
+                        display: 'none',
+                    },
+                },
+                '::slotted(*:not([primary],[cascade]))': {
+                    [mediaQueryDesktop]: {
+                        ...(!isPrimary && {
+                            display: 'none',
+                        }),
+                    },
+                },
             }),
-            [mediaQueryEnhancedView]: {
-                visibility: 'inherit',
-                transition: 'initial',
+        },
+        drawer: {
+            position: 'absolute',
+            inset: 0,
+            display: 'grid',
+            ...(isOpen
+                ? {
+                    opacity: 1,
+                    transform: 'translate3d(0,0,0)',
+                    transition: `${getTransition('opacity', dialogDurationOpen, easingOpen)}, ${getTransition('transform', dialogDurationOpen, easingOpen)}`,
+                }
+                : {
+                    opacity: 0,
+                    transform: 'translate3d(-100%,0,0)',
+                    transition: `${getTransition('opacity', dialogDurationClose, easingClose)}, ${getTransition('transform', dialogDurationClose, easingClose)}`,
+                    '&:dir(rtl)': {
+                        transform: 'translate3d(100%,0,0)',
+                    },
+                }),
+            [mediaQueryMobile]: {
+                gridTemplate: `${spacingFluidMedium} auto ${spacingFluidLarge} minmax(0, 1fr)/${spacingFluidLarge} auto minmax(0, 1fr) auto ${spacingFluidLarge}`,
+                background: backgroundColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    background: backgroundColorDark,
+                }),
             },
-            // simulates frosted glass header, to be visually in sync with header of secondary scroller
-            '&::before': {
-                content: '""',
-                display: 'block',
-                position: 'sticky',
-                top: 0,
-                zIndex: 1,
-                height: frostedGlassHeaderHeight,
-                backgroundColor: frostedGlassBackgroundColor,
-                WebkitBackdropFilter: 'blur(8px)',
-                backdropFilter: 'blur(8px)', // with current frostedGlassStyle of blur(32px) scrolling becomes visually distracting
+            [mediaQueryDesktop]: {
+                width: isSecondaryScrollerVisible ? `calc(${scrollerWidthDesktop} * 2)` : scrollerWidthDesktop,
+                gridTemplate: `${spacingFluidMedium} minmax(0, 1fr)/repeat(${isSecondaryScrollerVisible ? 2 : 1}, ${spacingFluidLarge} minmax(0, 1fr) ${spacingFluidLarge})`,
+                background: backgroundColor,
                 ...prefersColorSchemeDarkMediaQuery(theme, {
-                    backgroundColor: frostedGlassBackgroundColorDark$1,
+                    background: backgroundColorDark,
                 }),
-                [mediaQueryEnhancedView]: {
-                    display: 'none',
+                ...(isSecondaryScrollerVisible && {
+                    background: `linear-gradient(90deg,${backgroundColor} 0%,${backgroundColor} 50%,${backgroundSurfaceColor} 50%,${backgroundSurfaceColor} 100%)`,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        background: `linear-gradient(90deg,${backgroundColorDark} 0%,${backgroundColorDark} 50%,${backgroundSurfaceColorDark} 50%,${backgroundSurfaceColorDark} 100%)`,
+                    }),
+                    '&:dir(rtl)': {
+                        background: `linear-gradient(90deg,${backgroundSurfaceColor} 0%,${backgroundSurfaceColor} 50%,${backgroundColor} 50%,${backgroundColor} 100%)`,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            background: `linear-gradient(90deg,${backgroundSurfaceColorDark} 0%,${backgroundSurfaceColorDark} 50%,${backgroundColorDark} 50%,${backgroundColorDark} 100%)`,
+                        }),
+                    },
+                }),
+            },
+            '&::before, &::after': {
+                content: '""',
+                position: 'relative',
+                zIndex: 2,
+                pointerEvents: 'none',
+                opacity: 0,
+            },
+            '&::before': {
+                [mediaQueryMobile]: {
+                    gridArea: '1/1/-1/-1',
+                    background: backgroundColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        background: backgroundColorDark,
+                    }),
+                },
+                [mediaQueryDesktop]: {
+                    gridArea: '1/1/-1/4',
+                    background: backgroundColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        background: backgroundColorDark,
+                    }),
+                },
+            },
+            '&::after': {
+                [mediaQueryMobile]: {
+                    gridArea: '1/1/-1/-1',
+                    background: backgroundColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        background: backgroundColorDark,
+                    }),
+                },
+                [mediaQueryDesktop]: {
+                    gridArea: '1/4/-1/-1',
+                    background: backgroundSurfaceColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        background: backgroundSurfaceColorDark,
+                    }),
                 },
             },
         },
-        content: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: spacingFluidXSmall,
-            padding: `${spacingFluidSmall} ${spacingFluidLarge} ${spacingFluidLarge}`,
-            [mediaQueryEnhancedView]: {
-                padding: `${spacingFluidMedium} ${spacingFluidLarge} ${spacingFluidLarge}`,
+        scroller: {
+            [mediaQueryMobile]: {
+                display: 'contents',
+                ...(!isSecondaryScrollerVisible && {
+                    gridArea: '1/1/-1/-1',
+                    display: 'grid',
+                    gridTemplateRows: 'subgrid',
+                    gridTemplateColumns: 'subgrid',
+                    overflow: 'hidden auto',
+                    // overscrollBehaviorY: 'none', // when defined, rubber band effect on iOS 18 scroll is getting lost
+                    scrollBehavior: 'smooth',
+                    WebkitOverflowScrolling: 'touch',
+                    '&::before': {
+                        content: '""',
+                        position: 'sticky',
+                        top: 0,
+                        gridArea: '1/1/4/-1',
+                        zIndex: 1,
+                        background: `linear-gradient(180deg,${backgroundColor} 0%,${backgroundColor} 65%,transparent 100%)`,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            background: `linear-gradient(180deg,${backgroundColorDark} 0%,${backgroundColorDark} 65%,transparent 100%)`,
+                        }),
+                    },
+                }),
+            },
+            [mediaQueryDesktop]: {
+                gridArea: '1/1/-1/4',
+                display: 'grid',
+                gridTemplateRows: 'subgrid',
+                gridTemplateColumns: 'subgrid',
+                overflow: 'hidden auto',
+                // overscrollBehaviorY: 'none', // when defined, rubber band effect on iOS 18 scroll is getting lost
+                scrollBehavior: 'smooth',
+                WebkitOverflowScrolling: 'touch',
             },
         },
-        // header is needed to keep position of dismiss button in sync with header of secondary scroller
-        header: {
-            position: 'relative',
-            zIndex: 3, // ensures dismiss button is visible on secondary drawer in mobile view
-            gridArea: '1/1',
-            alignSelf: 'flex-start',
-            justifySelf: 'flex-end',
-            marginInlineEnd: `calc(${spacingFluidLarge} - ${spacingFluidSmall})`,
-            height: frostedGlassHeaderHeight,
-            display: 'flex',
-            alignItems: 'center',
-            [mediaQueryEnhancedView]: {
-                marginInlineEnd: 0,
-                gridArea: '1/-1',
-                placeSelf: 'flex-start',
+        'dismiss-mobile': {
+            [mediaQueryMobile]: {
+                ...dismissButtonJssStyle,
+                width: 'fit-content',
+                height: 'fit-content',
+                placeSelf: 'center flex-end',
+                gridArea: '2/4',
+                zIndex: 3, // ensures dismiss button is on top of opacity animation handled by ::before/::after
+                marginInlineEnd: '-1px', // improve visual alignment and compensate white space of close icon
+            },
+            [mediaQueryDesktop]: {
+                display: 'none',
             },
         },
-        dismiss: {
-            padding: spacingFluidSmall,
-            [mediaQueryEnhancedView]: {
+        'dismiss-desktop': {
+            [mediaQueryMobile]: {
+                display: 'none',
+            },
+            [mediaQueryDesktop]: {
                 '--p-internal-icon-filter': 'invert(1)',
-                margin: spacingFluidSmall,
+                position: 'absolute',
+                insetInlineStart: `calc(100% + ${spacingFluidSmall})`,
+                insetBlockStart: spacingFluidSmall,
                 padding: spacingStaticSmall,
             },
         },
-    });
-};
-const getContentJssStyle = () => {
-    return {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: spacingFluidXSmall,
-        padding: `${spacingFluidSmall} ${spacingFluidLarge} ${spacingFluidLarge}`,
-        [mediaQueryEnhancedView]: {
-            padding: `${spacingFluidMedium} ${spacingFluidLarge} ${spacingFluidLarge}`,
+        back: {
+            display: 'none',
+            ...(isSecondaryScrollerVisible && {
+                [mediaQueryMobile]: {
+                    display: 'block',
+                    gridArea: '2/2',
+                    width: 'fit-content',
+                    height: 'fit-content',
+                    placeSelf: 'center flex-start',
+                    zIndex: 2,
+                },
+            }),
         },
-    };
+    });
 };
 
-const frostedGlassBackgroundColorLight = 'rgba(238, 239, 242, 0.79)';
-const frostedGlassBackgroundColorDark = 'rgba(33, 34, 37, 0.79)';
-const getComponentCss$S = (isSecondaryScrollerVisible, theme) => {
-    const { primaryColor, backgroundSurfaceColor, hoverColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
-    const frostedGlassBackgroundColor = isThemeDark(theme)
-        ? frostedGlassBackgroundColorDark
-        : frostedGlassBackgroundColorLight;
-    const fadeInOutTransition = isSecondaryScrollerVisible
-        ? {
-            opacity: 1,
-            transition: `${getTransition('opacity', 'veryLong', 'in', 'short')}`,
-            [mediaQueryEnhancedView]: {
-                transition: `${getTransition('opacity', 'veryLong', 'in')}`,
-            },
-        }
-        : {
-            opacity: 0,
-            transition: `${getTransition('opacity', 'short', 'out')}`,
-        };
+const getComponentCss$S = (isPrimary, isSecondary, isCascade, theme) => {
+    const { primaryColor, backgroundColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
     return getCss({
         '@global': {
+            '@keyframes slide-up-mobile': {
+                from: { transform: `translate3d(0,${spacingFluidMedium},0)` },
+                to: { transform: 'translate3d(0,0,0)' },
+            },
+            '@keyframes slide-up-desktop-primary': {
+                from: { marginBlockStart: spacingFluidMedium },
+                to: { marginBlockStart: '0px' },
+            },
+            '@keyframes slide-up-desktop-secondary': {
+                from: { marginBlockStart: spacingFluidMedium },
+                to: { marginBlockStart: '0px' },
+            },
             ':host': {
-                display: 'block',
+                display: 'contents',
                 ...addImportantToEachRule({
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
-            ...preventFoucOfNestedElementsStyles,
-            '::slotted(:is(h1, h2, h3, h4, h5, h6))': addImportantToEachRule({
-                ...headingSmallStyle,
-                margin: 0,
-                color: primaryColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: primaryColorDark,
-                }),
-            }),
-            '::slotted(:is(h1, h2, h3, h4, h5, h6):not(:first-child))': addImportantToEachRule({
-                margin: `calc(${spacingFluidMedium} - ${spacingFluidXSmall}) 0 0`, // spacingFluidXSmall to compensate default gap
-            }),
-            '::slotted': addImportantToEachRule({
-                '&(p)': {
-                    ...textSmallStyle,
-                    margin: 0,
-                    color: primaryColor,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        color: primaryColorDark,
+            slot: {
+                display: 'none',
+                [mediaQueryMobile]: {
+                    ...(isSecondary && {
+                        zIndex: 0,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: spacingFluidXSmall,
+                        gridArea: '4/2/auto/-2',
+                        height: 'fit-content', // ensures padding bottom is added instead of subtracted because of grid context
+                        paddingBlockEnd: spacingFluidLarge,
+                        animation: getAnimation('slide-up-mobile', 'moderate', 'base'),
+                    }),
+                    ...((isPrimary || isCascade) && {
+                        display: 'contents',
                     }),
                 },
-                '&(a)': {
-                    ...{
-                        ...textSmallStyle,
-                        alignSelf: 'flex-start',
+                [mediaQueryDesktop]: {
+                    ...((isPrimary || isSecondary) && {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: spacingFluidXSmall,
+                        height: 'fit-content', // ensures padding bottom is added instead of subtracted because of grid context
+                        animation: getAnimation(`slide-up-desktop-${isPrimary ? 'primary' : 'secondary'}`, 'moderate', 'base'),
+                    }),
+                    ...(isSecondary && {
+                        gridArea: '2/2/auto/-2',
+                        paddingBlockEnd: spacingFluidLarge,
+                    }),
+                    ...(isCascade && {
+                        display: 'contents',
+                    }),
+                },
+            },
+            h2: {
+                display: 'none',
+                [mediaQueryMobile]: {
+                    ...(isSecondary && {
+                        ...headingSmallStyle,
                         display: 'block',
-                        textDecoration: 'none',
-                        cursor: 'pointer',
-                        color: primaryColor,
-                        borderRadius: borderRadiusSmall,
-                        marginLeft: `-${spacingStaticXSmall}`,
-                        marginRight: `-${spacingStaticXSmall}`,
-                        padding: `2px ${spacingStaticXSmall}`,
-                        transition: `background var(${cssVariableTransitionDuration}, ${motionDurationShort}) ${motionEasingBase}`,
+                        gridArea: '2/3',
+                        placeSelf: 'center',
+                        zIndex: 2,
+                        margin: 0,
+                        paddingInline: spacingStaticMedium,
+                        maxWidth: '100%',
+                        boxSizing: 'border-box',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        color: primaryColor, // enables color inheritance for slotted content
                         ...prefersColorSchemeDarkMediaQuery(theme, {
                             color: primaryColorDark,
                         }),
+                    }),
+                },
+            },
+            // If cascade we need to hide all children which are not primary or another cascade (e.g. all siblings of the primary or cascade item)
+            ...(isCascade && {
+                '::slotted(*:not([primary],[cascade]))': {
+                    display: 'none',
+                },
+            }),
+            ...(isPrimary && {
+                '::slotted(*:not([secondary]))': {
+                    [mediaQueryMobile]: {
+                        display: 'none',
                     },
                 },
-                '&(a[aria-current])': {
-                    background: hoverColor,
+            }),
+            '::slotted': {
+                '&(a)': {
+                    all: 'unset',
+                    alignSelf: 'flex-start',
+                    font: textMediumStyle.font,
+                    cursor: 'pointer',
+                    borderRadius: borderRadiusSmall,
+                    padding: addImportantToRule(spacingFluidSmall),
+                    marginInline: addImportantToRule(`calc(${spacingFluidSmall} * -1)`),
+                    color: primaryColor,
+                    textDecoration: 'underline',
+                    textDecorationColor: 'transparent',
+                    transition: `${getTransition('text-decoration-color')}`,
                     ...prefersColorSchemeDarkMediaQuery(theme, {
-                        background: hoverColorDark,
+                        color: primaryColorDark,
                     }),
                 },
+                '&(a[aria-current])': {
+                    textDecoration: 'underline',
+                },
                 ...hoverMediaQuery({
-                    // TODO: how can we easily re-use getHoverStyle() with ::slotted(a) selector?
                     '&(a:hover)': {
-                        background: hoverColor,
-                        ...prefersColorSchemeDarkMediaQuery(theme, {
-                            background: hoverColorDark,
-                        }),
+                        textDecorationColor: 'inherit',
                     },
                 }),
                 ...getFocusJssStyle(theme, { slotted: 'a', offset: '-2px' }),
-            }),
+            },
+            ...preventFoucOfNestedElementsStyles,
         },
-        button: {
-            width: 'auto',
-            padding: spacingFluidSmall,
-            margin: `0 calc(${spacingFluidSmall} * -1)`,
+        // drawer subgrid in combination with scroller grid ensures no content squeezing during slide up animation, potentially caused by scrollbar
+        drawer: {
+            [mediaQueryMobile]: {
+                display: 'none',
+                ...((isPrimary || isSecondary || isCascade) && {
+                    display: 'contents',
+                }),
+            },
+            [mediaQueryDesktop]: {
+                display: 'none',
+                ...(isSecondary && {
+                    position: 'absolute', // enables to break out of scroll area
+                    inset: 0,
+                    insetInlineStart: scrollerWidthDesktop,
+                    display: 'grid',
+                    gridTemplate: `${spacingFluidMedium} minmax(0, 1fr)/${spacingFluidLarge} minmax(0, 1fr) ${spacingFluidLarge}`,
+                }),
+                ...((isPrimary || isCascade) && {
+                    display: 'contents',
+                }),
+            },
         },
         scroller: {
-            position: 'fixed',
-            inset: 0,
-            // "cssVariableTransitionDuration" ensures closing animation of secondary scroller is given when whole flyout-multilevel gets closed
-            // "cssVariableVisibility" ensures secondary scroller is not tabbable when whole flyout-multilevel is closed
-            ...(isSecondaryScrollerVisible
-                ? {
-                    zIndex: 2,
-                    transform: 'translate3d(0, 0, 0)',
-                    // TODO: Should be visibility: inherit to allow overwriting but currently not possible since it would inherit from the scroller of the p-flyout-multilevel itself, which is hidden on mobile
-                    visibility: `var(${cssVariableVisibility},visible)`,
-                    transition: `${getTransition('transform', 'long', 'in')}, visibility 0s linear var(${cssVariableTransitionDuration},var(${cssVariableVisibilityTransitionDuration},0s))`,
-                }
-                : {
-                    zIndex: 1,
-                    transform: 'translate3d(100%, 0, 0)',
-                    visibility: `var(${cssVariableVisibility},hidden)`,
-                    transition: `${getTransition('transform', 'long', 'out')}, visibility 0s linear var(${cssVariableTransitionDuration},var(${cssVariableVisibilityTransitionDuration},${motionDurationLong}))`,
+            [mediaQueryMobile]: {
+                display: 'none',
+                ...(isSecondary && {
+                    display: 'grid',
+                    gridTemplateRows: 'subgrid',
+                    gridTemplateColumns: 'subgrid',
+                    gridArea: '1/1/-1/-1',
+                    overflow: 'hidden auto',
+                    // overscrollBehaviorY: 'none',  // when defined, rubber band effect on iOS 18 scroll is getting lost
+                    scrollBehavior: 'smooth',
+                    WebkitOverflowScrolling: 'touch',
+                    '&::before': {
+                        zIndex: 1,
+                        content: '""',
+                        position: 'sticky',
+                        top: 0,
+                        gridArea: '1/1/4/-1',
+                        background: `linear-gradient(180deg,${backgroundColor} 0%,${backgroundColor} 65%,transparent 100%)`,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            background: `linear-gradient(180deg,${backgroundColorDark} 0%,${backgroundColorDark} 65%,transparent 100%)`,
+                        }),
+                    },
+                }),
+                ...((isPrimary || isCascade) && {
+                    display: 'contents',
                 }),
-            width: '100vw',
-            boxSizing: 'border-box',
-            overflow: 'auto',
-            ...dropShadowHighStyle,
-            // it's important to define background-color for each scroller to have correct scrollbar coloring
-            backgroundColor: backgroundSurfaceColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                backgroundColor: backgroundSurfaceColorDark,
-            }),
-            [mediaQueryEnhancedView]: {
-                boxShadow: 'none',
-                insetInlineStart: `calc(${scrollerWidthEnhancedView} - 1px)`, // -1px prevents possible visible background under certain circumstances between primary and secondary scroller
-                width: scrollerWidthEnhancedView,
-                transform: addImportantToRule('initial'), // to overrule :dir(rtl) selector
-                transition: `visibility 0s linear var(${cssVariableTransitionDuration},var(${cssVariableVisibilityTransitionDuration},0s))`,
             },
-            '&:dir(rtl)': {
-                ...(!isSecondaryScrollerVisible && {
-                    transform: 'translate3d(-100%, 0, 0)', // use correct transitions in rtl mode for mobile view
+            [mediaQueryDesktop]: {
+                display: 'none',
+                ...(isSecondary && {
+                    gridArea: '1/1/-1/-1',
+                    display: 'grid',
+                    gridTemplateRows: 'subgrid',
+                    gridTemplateColumns: 'subgrid',
+                    overflow: 'hidden auto',
+                    // overscrollBehaviorY: 'none', // when defined, rubber band effect on iOS 18 scroll is getting lost
+                    scrollBehavior: 'smooth',
+                    WebkitOverflowScrolling: 'touch',
+                }),
+                ...((isPrimary || isCascade) && {
+                    display: 'contents',
                 }),
             },
         },
-        // header needs to be placed within scroller to ensure scrollbars are fully visible
-        header: {
-            position: 'sticky',
-            top: 0,
-            zIndex: 1,
-            height: frostedGlassHeaderHeight,
-            padding: `0 ${spacingFluidLarge}`,
-            display: 'grid',
-            gridTemplateColumns: '4rem minmax(0, 1fr) 4rem',
-            alignItems: 'center',
-            gap: spacingFluidSmall,
-            WebkitBackdropFilter: 'blur(8px)',
-            backdropFilter: 'blur(8px)', // with current frostedGlassStyle of blur(32px) scrolling becomes visually distracting
-            backgroundColor: frostedGlassBackgroundColor,
-            ...fadeInOutTransition,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                backgroundColor: frostedGlassBackgroundColorDark,
-            }),
-            [mediaQueryEnhancedView]: {
+        button: {
+            ...((isPrimary || isCascade) && {
                 display: 'none',
+            }),
+            [mediaQueryMobile]: {
+                ...(isSecondary && {
+                    display: 'none',
+                }),
             },
+            ...(!isPrimary &&
+                !isCascade && {
+                padding: spacingFluidSmall,
+                margin: `0 calc(${spacingFluidSmall} * -1)`,
+            }),
         },
         back: {
-            justifySelf: 'flex-start',
-            padding: spacingFluidSmall,
-            marginInlineStart: `calc(${spacingFluidSmall} * -1)`,
-        },
-        heading: {
-            ...headingMediumStyle,
-            margin: 0,
-            padding: 0,
-            overflow: 'hidden',
-            textAlign: 'center',
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
-            color: primaryColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: primaryColorDark,
+            ...(!isPrimary && {
+                display: 'none',
+            }),
+            ...(isPrimary && {
+                [mediaQueryMobile]: {
+                    gridArea: '2/2',
+                    width: 'fit-content',
+                    height: 'fit-content',
+                    placeSelf: 'center flex-start',
+                    zIndex: 2,
+                },
+                [mediaQueryDesktop]: {
+                    width: 'fit-content',
+                    height: 'fit-content',
+                    marginInlineStart: '-4px', // improve visual alignment and compensate white space of arrow-left icon
+                },
             }),
         },
-        content: mergeDeep(getContentJssStyle(), fadeInOutTransition),
     });
 };
 
@@ -7892,7 +8040,7 @@ const getComponentCss$D = (model, safeZone, size, color, theme) => {
                 maxWidth: '100%',
                 maxHeight: '100%',
                 // width + height style can't be !important atm to be backwards compatible with e.g. `<p-model-signature size="inherit" style="height: 50px"/>`
-                width: `var(${cssVariableWidth},${isSizeInherit ? 'auto' : width + 'px'})`,
+                width: `var(${cssVariableWidth},${isSizeInherit ? 'auto' : `${width}px`})`,
                 height: `var(${cssVariableHeight},auto)`,
                 ...addImportantToEachRule({
                     mask: `url(${getSvgUrl(model)}) no-repeat left top / contain`,
@@ -8060,7 +8208,7 @@ const getSlottedTextFieldTextareaSelectStyles = (child, state, isLoading, theme,
             }),
             ...additionalDefaultJssStyle,
         },
-        ['::slotted(:not(input[type="password"]))']: {
+        '::slotted(:not(input[type="password"]))': {
             textOverflow: 'ellipsis',
         },
         ...(!isLoading &&
@@ -8608,7 +8756,7 @@ const removeStyles = (selector, styles) => Object.fromEntries(Object.entries(sty
     return [key, value];
 }));
 
-const getComponentCss$x = (hideLabel, state, isDisabled, isLoading, isWithinForm, length, theme) => {
+const getComponentCss$x = (hideLabel, state, isDisabled, isLoading, length, theme) => {
     const inputSize = `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`; // equivalent to calculation of input height within form-styles
     const inputStyles = removeStyles('input[readonly]', removeSlottedSelector(getSlottedTextFieldTextareaSelectStyles('input', state, isLoading, theme, {
         // TODO: move into getSlottedTextFieldTextareaSelectStyles()
@@ -8656,15 +8804,6 @@ const getComponentCss$x = (hideLabel, state, isDisabled, isLoading, isWithinForm
             ...preventFoucOfNestedElementsStyles,
             // input
             ...inputStyles,
-            ...(isWithinForm &&
-                addImportantToEachRule({
-                    '::slotted([slot=internal-input])': {
-                        position: 'absolute',
-                        height: inputSize,
-                        width: 0,
-                        opacity: 0,
-                    },
-                })),
         },
         root: {
             display: 'grid',
@@ -8854,7 +8993,6 @@ const getComponentCss$w = (direction, isNativePopoverCase, theme) => {
             position: 'absolute',
             zIndex: POPOVER_Z_INDEX,
             filter: `drop-shadow(0 0 16px ${shadowColor})`,
-            backdropFilter: 'drop-shadow(0px 0px 0px transparent)', // fixes issues with Chrome >= 105 where filter: drop-shadow is not applied correctly after animation ends
             pointerEvents: 'none',
             animation: `${motionDurationShort} $fadeIn ${motionEasingBase} forwards`
                 ,
@@ -9128,7 +9266,13 @@ const getColors$2 = (isDisabled, isSelected, theme) => {
     return {
         buttonColor: isDisabled ? disabledColor : primaryColor,
         labelColor: isDisabled ? disabledColor : contrastMediumColor,
-        borderColor: isSelected ? (isHighContrastMode ? highlightColor : primaryColor) : contrastLowColor,
+        borderColor: isSelected
+            ? isDisabled
+                ? disabledColor
+                : isHighContrastMode
+                    ? highlightColor
+                    : primaryColor
+            : contrastLowColor,
         hoverBorderColor: primaryColor,
     };
 };
@@ -9204,11 +9348,7 @@ const getComponentCss$t = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
         }),
     });
 };
-
-const MIN_ITEM_WIDTH = 46;
-const MAX_ITEM_WIDTH = 220;
 const getComponentCss$s = (maxWidth, columns) => {
-    maxWidth = (maxWidth > MAX_ITEM_WIDTH && MAX_ITEM_WIDTH) || (maxWidth < MIN_ITEM_WIDTH && MIN_ITEM_WIDTH) || maxWidth;
     return getCss({
         '@global': {
             ':host': {
@@ -9216,7 +9356,9 @@ const getComponentCss$s = (maxWidth, columns) => {
                 ...addImportantToEachRule({
                     gridAutoRows: '1fr', // for equal height
                     ...buildResponsiveStyles(columns, (col) => ({
-                        gridTemplateColumns: col === 'auto' ? `repeat(auto-fit, ${maxWidth}px)` : `repeat(${col}, minmax(0, 1fr))`,
+                        gridTemplateColumns: col === 'auto'
+                            ? `repeat(auto-fit, ${maxWidth}px)`
+                            : `repeat(${col}, minmax(0, 1fr))`,
                     })),
                     gap: '6px',
                     ...colorSchemeStyles,
@@ -9396,7 +9538,7 @@ const getListStyles$1 = (direction, theme) => {
     const { highlightColor } = getHighContrastColors();
     return {
         '@global': {
-            ul: {
+            '[role="listbox"]': {
                 display: 'flex',
                 flexDirection: 'column',
                 gap: spacingStaticSmall,
@@ -9868,9 +10010,9 @@ const getComponentCss$o = (size, theme) => {
 };
 
 const getSVGPath = (stepCount, numberedCircleColors, isStateCurrent) => {
-    // # of the hexcolor starts a fragment identifier in URLs, so we have to replace it with the escaped value of # = %23
-    numberedCircleColors = Object.entries(numberedCircleColors).reduce((result, [key, value]) => ({ ...result, [key]: escapeHashCharacter(value) }), {});
-    const { disabledColor, invertedBaseColor, primaryColor } = numberedCircleColors;
+    // # of the hex color starts a fragment identifier in URLs, so we have to replace it with the escaped value of # = %23
+    const escapedNumberedCircleColors = Object.entries(numberedCircleColors).reduce((result, [key, value]) => ({ ...result, [key]: escapeHashCharacter(value) }), {});
+    const { disabledColor, invertedBaseColor, primaryColor } = escapedNumberedCircleColors;
     const fillColor = isStateCurrent ? invertedBaseColor : disabledColor;
     const svgCirclePath = `<circle fill="${isStateCurrent ? primaryColor : 'none'}"${isStateCurrent ? '' : ` stroke="${fillColor}"`} stroke-width="1px" cx="12" cy="12" r="9"/>`;
     // Full SVG is provided by design (./numbers_raw.svg), created with illustrator and optimized with ImageOptim.
@@ -9899,7 +10041,7 @@ const getComponentCss$n = (state, disabled, theme) => {
         '@global': {
             ':host': {
                 ...(isStateCurrentOrUndefined &&
-                    Array.from(Array(9)).reduce((result, _, i) => ({
+                    Array.from(new Array(9)).reduce((result, _, i) => ({
                         ...result,
                         [`&(:nth-of-type(${i + 1})) $button::before`]: {
                             backgroundImage: getInlineSVGBackgroundImage(getSVGPath(i, {
@@ -10465,8 +10607,7 @@ const getComponentCss$d = (size, weight, theme) => {
         },
         // conditionally applied and removed based on if activeTabIndex exists
         [scrollerAnimatedCssClass]: {
-            ['& ' +
-                transformSelector('::slotted([role][aria-selected="true"])::after, ::slotted([role][aria-current="true"])::after')]: {
+            [`& ${transformSelector('::slotted([role][aria-selected="true"])::after, ::slotted([role][aria-current="true"])::after')}`]: {
                 transition: addImportantToRule(`visibility 0s linear var(${cssVariableTransitionDuration}, ${motionDurationModerate})`), // bar appears after transition
             },
         },
@@ -10787,6 +10928,9 @@ const getComponentCss$8 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter
                     '&(input:-internal-autofill-selected),&(input:-internal-autofill-previewed),&(input:-webkit-autofill),&(input:-webkit-autofill:focus)': {
                         WebkitBackgroundClip: 'padding-box', // reset webkit autofill styles
                     },
+                    '&(input[type="email"]),&(input[type="tel"])': {
+                        direction: 'ltr', // fixes specific input types in RTL mode. Should always be LTR. See https://rtlstyling.com/posts/rtl-styling#form-inputs
+                    },
                 },
             }),
         },
@@ -11085,7 +11229,7 @@ const getComponentCss$3 = (isDisabled, hideLabel, state, hasCounter, resize, the
             },
             ...hoverMediaQuery({
                 // with the media query the selector has higher priority and overrides disabled styles
-                ['textarea:not(:disabled):not(:focus):not([readonly]):hover,label:hover~.wrapper textarea:not(:disabled):not(:focus):not([readonly])']: {
+                'textarea:not(:disabled):not(:focus):not([readonly]):hover,label:hover~.wrapper textarea:not(:disabled):not(:focus):not([readonly])': {
                     borderColor: formStateHoverColor || primaryColor,
                     ...prefersColorSchemeDarkMediaQuery(theme, {
                         borderColor: formStateHoverColorDark || primaryColorDark,