@porsche-design-system/components-react 3.0.0-rc.0 → 3.0.0-rc.2

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

@@ -4,6 +4,8 @@ const isDisabledOrLoading = (disabled, loading) => {
 
 const hasWindow = typeof window !== 'undefined';
 
+const isHighContrastMode = hasWindow && window.matchMedia && matchMedia('(forced-colors: active)').matches;
+
 const attributeMutationMap = new Map();
 hasWindow &&
     new MutationObserver((mutations) => {
@@ -39,6 +41,8 @@ const borderRadiusSmall = '4px';
 
 const borderRadiusMedium = '8px';
 
+const borderRadiusLarge = '12px';
+
 const borderWidthBase = '2px';
 
 const _dropShadowBackgroundColor = 'rgba(0, 0, 0, 0.16)';
@@ -105,12 +109,6 @@ const fontWeightSemiBold = 600;
 
 const fontWeightBold = 700;
 
-const fontWeight = {
-    regular: fontWeightRegular,
-    semiBold: fontWeightSemiBold,
-    bold: fontWeightBold,
-};
-
 const fontStyleNormal = 'normal';
 
 const fontVariant = 'normal';
@@ -518,25 +516,6 @@ var _typeof$1 = typeof Symbol === "function" && typeof Symbol.iterator === "symb
 
 var isBrowser = (typeof window === "undefined" ? "undefined" : _typeof$1(window)) === "object" && (typeof document === "undefined" ? "undefined" : _typeof$1(document)) === 'object' && document.nodeType === 9;
 
-var isProduction = process.env.NODE_ENV === 'production';
-function warning(condition, message) {
-  if (!isProduction) {
-    if (condition) {
-      return;
-    }
-
-    var text = "Warning: " + message;
-
-    if (typeof console !== 'undefined') {
-      console.warn(text);
-    }
-
-    try {
-      throw Error(text);
-    } catch (x) {}
-  }
-}
-
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
@@ -643,9 +622,7 @@ function createRule(name, decl, options) {
   var rule = jss.plugins.onCreateRule(name, declCopy, options);
   if (rule) return rule; // It is an at-rule and it has no instance.
 
-  if (name[0] === '@') {
-    process.env.NODE_ENV !== "production" ? warning(false, "[JSS] Unknown rule " + name) : void 0;
-  }
+  if (name[0] === '@') ;
 
   return null;
 }
@@ -846,9 +823,7 @@ function () {
 
     var sheet = this.options.sheet;
 
-    if (sheet && sheet.attached) {
-      process.env.NODE_ENV !== "production" ? warning(false, '[JSS] Rule is not linked. Missing sheet option "link: true".') : void 0;
-    }
+    if (sheet && sheet.attached) ;
 
     return this;
   };
@@ -1094,7 +1069,6 @@ function () {
       this.name = nameMatch[1];
     } else {
       this.name = 'noname';
-      process.env.NODE_ENV !== "production" ? warning(false, "[JSS] Bad keyframes name " + key) : void 0;
     }
 
     this.key = this.type + "-" + this.name;
@@ -1153,8 +1127,6 @@ var findReferencedKeyframe = function findReferencedKeyframe(val, keyframes) {
       if (name in keyframes) {
         return keyframes[name];
       }
-
-      process.env.NODE_ENV !== "production" ? warning(false, "[JSS] Referenced keyframes rule \"" + name + "\" is not defined.") : void 0;
       return match;
     });
   }
@@ -1979,8 +1951,6 @@ function () {
       for (var name in plugin) {
         if (name in registry) {
           registry[name].push(plugin[name]);
-        } else {
-          process.env.NODE_ENV !== "production" ? warning(false, "[JSS] Unknown hook \"" + name + "\".") : void 0;
         }
       }
 
@@ -2122,8 +2092,6 @@ if (globalThis$1[ns] == null) globalThis$1[ns] = 0; // Bundle may contain multip
 // the module.
 
 var moduleId = globalThis$1[ns]++;
-
-var maxRules = 1e10;
 /**
  * Returns a function which generates unique class names based on counters.
  * When new generator function is created, rule counter is reseted.
@@ -2140,10 +2108,6 @@ var createGenerateId = function createGenerateId(options) {
   var generateId = function generateId(rule, sheet) {
     ruleCounter += 1;
 
-    if (ruleCounter > maxRules) {
-      process.env.NODE_ENV !== "production" ? warning(false, "[JSS] You might have a memory leak. Rule counter is at " + ruleCounter + ".") : void 0;
-    }
-
     var jssId = '';
     var prefix = '';
 
@@ -2239,7 +2203,6 @@ var removeProperty = function removeProperty(cssRule, prop) {
       cssRule.style.removeProperty(prop);
     }
   } catch (err) {
-    process.env.NODE_ENV !== "production" ? warning(false, "[JSS] DOMException \"" + err.message + "\" was thrown. Tried to remove property \"" + prop + "\".") : void 0;
   }
 };
 /**
@@ -2353,10 +2316,6 @@ function findPrevNode(options) {
         node: comment.nextSibling
       };
     } // If user specifies an insertion point and it can't be found in the document -
-    // bad specificity issues may appear.
-
-
-    process.env.NODE_ENV !== "production" ? warning(false, "[JSS] Insertion point \"" + insertionPoint + "\" not found.") : void 0;
   }
 
   return false;
@@ -2379,7 +2338,7 @@ function insertStyle(style, options) {
   if (insertionPoint && typeof insertionPoint.nodeType === 'number') {
     var insertionPointElement = insertionPoint;
     var parentNode = insertionPointElement.parentNode;
-    if (parentNode) parentNode.insertBefore(style, insertionPointElement.nextSibling);else process.env.NODE_ENV !== "production" ? warning(false, '[JSS] Insertion point is not in the DOM.') : void 0;
+    if (parentNode) parentNode.insertBefore(style, insertionPointElement.nextSibling);
     return;
   }
 
@@ -2404,7 +2363,6 @@ var _insertRule = function insertRule(container, rule, index) {
         container.appendRule(rule);
       }
   } catch (err) {
-    process.env.NODE_ENV !== "production" ? warning(false, "[JSS] " + err.message) : void 0;
     return false;
   }
 
@@ -2825,8 +2783,6 @@ function () {
       entry.refs++;
       return entry.sheet;
     }
-
-    warning(false, "[JSS] SheetsManager: can't find sheet to manage");
     return undefined;
   };
 
@@ -2838,8 +2794,6 @@ function () {
         entry.refs--;
         if (entry.refs === 0) entry.sheet.detach();
       }
-    } else {
-      warning(false, "SheetsManager: can't find sheet to unmanage");
     }
   };
 
@@ -3181,8 +3135,6 @@ function jssNested() {
       if (rule) {
         return rule.selector;
       }
-
-      process.env.NODE_ENV !== "production" ? warning(false, "[JSS] Could not find the referenced rule \"" + key + "\" in \"" + (container.options.meta || container.toString()) + "\".") : void 0;
       return key;
     };
   }
@@ -3274,6 +3226,10 @@ function jssNested() {
   };
 }
 
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
 function getAugmentedNamespace(n) {
   if (n.__esModule) return n;
   var f = n.default;
@@ -3335,7 +3291,7 @@ var _tslib$1 = {};
 				return t;
 			};
 		return exports.__assign.apply(this, arguments);
-	};
+	}; 
 } (_tslib$1));
 
 var require$$1 = /*@__PURE__*/getAugmentedNamespace(jss_esm);
@@ -3695,6 +3651,8 @@ function jssCombineAndSortMQ(options) {
 
 var dist = jssCombineAndSortMQ;
 
+var jssPluginSortMediaQueries = /*@__PURE__*/getDefaultExportFromCjs(dist);
+
 /* Auto Generated Start */
 const themeLight = {
     primaryColor: '#010205',
@@ -3777,8 +3735,21 @@ const themes = {
     'dark': themeDark
 };
 /* Auto Generated End */
+const schemeHighContrastMerged = {
+    disabledColor: 'GrayText',
+    focusColor: 'Highlight',
+};
+const schemeHighContrast = {
+    canvasColor: 'Canvas',
+    canvasTextColor: 'CanvasText',
+    highlightColor: 'Highlight',
+    linkColor: 'LinkText',
+};
 const getThemedColors = (theme) => {
-    return themes[theme];
+    return isHighContrastMode ? Object.assign(Object.assign({}, themes[theme]), schemeHighContrastMerged) : themes[theme];
+};
+const getHighContrastColors = () => {
+    return schemeHighContrast;
 };
 const getInvertedThemedColors = (theme) => {
     return getThemedColors(isThemeDark(theme) ? 'light' : 'dark');
@@ -3825,36 +3796,20 @@ const focusPseudoJssStyle = {
         outline: 0,
     },
 };
-const getTextHiddenJssStyle = (isHidden) => isHidden
-    ? getScreenReaderOnlyJssStyle()
-    : {
-        position: 'static',
-        width: 'auto',
-        height: 'auto',
-        margin: 0,
-        overflow: 'visible',
-        clip: 'auto',
-        clipPath: 'none',
-        whiteSpace: 'normal',
-    };
-const getFormTextHiddenJssStyle = (isHidden) => (Object.assign(Object.assign({}, getTextHiddenJssStyle(isHidden)), { width: 'fit-content' }));
-const getFormCheckboxRadioHiddenJssStyle = (isHidden) => (Object.assign(Object.assign({}, getTextHiddenJssStyle(isHidden)), { width: 'auto', padding: `2px 0 0 ${spacingStaticSmall}` }));
 /**
- * Screen reader only styles to hide (text-)contents visually in the browser but grant access for screen readers
+ * Returns a JSS style object that can be used to visually hide text in the browser, while still allowing it to be accessed by screen readers.
+ * @param {boolean} isHidden - A boolean value indicating whether the text should be hidden or not. Defaults to true.
+ * @param {JssStyle} isShownJssStyle - Additional styles applied when isHidden = false
+ * @returns {JssStyle} - A JSS style object containing styles depending on the value of isHidden and isShownJssStyle.
  */
-const getScreenReaderOnlyJssStyle = () => {
-    return {
+const getHiddenTextJssStyle = (isHidden = true, isShownJssStyle) => isHidden
+    ? {
         position: 'absolute',
+        width: 0,
         height: '1px',
-        width: '1px',
-        border: '0',
-        margin: '-1px',
-        overflow: 'hidden',
-        clip: 'rect(1px,1px,1px,1px)',
-        clipPath: 'inset(50%)',
-        whiteSpace: 'nowrap',
-    };
-};
+        textIndent: '-999999px',
+    }
+    : Object.assign({ position: 'static', width: 'auto', height: 'auto', textIndent: 0 }, isShownJssStyle);
 const getBackfaceVisibilityJssStyle = () => ({
     backfaceVisibility: 'hidden',
     WebkitBackfaceVisibility: 'hidden',
@@ -3876,13 +3831,20 @@ const hoverMediaQuery = (style) =>
 ({ '@media(hover:hover)': style }) // used for prod build, yarn start and unit tests
     ; // used for staging build in e2e and vrt tests
 
+const getSchemedHighContrastMediaQuery = (light, dark) => {
+    return {
+        '@media (forced-colors: active) and (prefers-color-scheme: light)': light,
+        '@media (forced-colors: active) and (prefers-color-scheme: dark)': dark,
+    };
+};
+
 // NOTE: handpicked selection of plugins from jss-preset-default
 const jss = createJss({
     plugins: [
         jssGlobal(),
         jssNested(),
         camelCase(),
-        dist({ combineMediaQueries: true }),
+        jssPluginSortMediaQueries({ combineMediaQueries: true }),
     ],
 });
 const getCss = (jssStyles) => jss
@@ -3953,14 +3915,14 @@ const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
 const getComponentCss$Y = (size, compact, open, theme) => {
     const { primaryColor, hoverColor, focusColor, contrastLowColor } = getThemedColors(theme);
-    const border = `1px solid ${contrastLowColor}`;
-    return getCss(Object.assign(Object.assign({ '@global': {
-            ':host': addImportantToEachRule(Object.assign({ display: 'block' }, hostHiddenStyles)),
-            button: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', position: 'relative', justifyContent: 'space-between', margin: '2px 0', width: '100%', textDecoration: 'none', border: 0, outline: 0, gap: '24px', background: 'transparent', cursor: 'pointer', textAlign: 'left', color: primaryColor }, textSmallStyle), { fontWeight: fontWeight.semiBold }), buildResponsiveStyles(size, (s) => ({
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                fontSize: fontSizeText[s],
-                padding: compact ? '4px 0' : `${s === 'medium' ? '20px' : '12px'} 0`,
+    return getCss({
+        '@global': {
+            ':host': addImportantToEachRule(Object.assign(Object.assign({ display: 'block' }, (!compact && {
+                borderBottom: `1px solid ${contrastLowColor}`,
+            })), hostHiddenStyles)),
+            button: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', position: 'relative', justifyContent: 'space-between', width: '100%', textDecoration: 'none', border: 0, outline: 0, gap: '24px', background: 'transparent', cursor: 'pointer', textAlign: 'left', color: primaryColor }, textSmallStyle), { fontWeight: fontWeightSemiBold }), buildResponsiveStyles(size, (s) => ({
+                fontSize: s === 'medium' ? fontSizeTextMedium : fontSizeTextSmall,
+                padding: `${compact ? '4px' : s === 'medium' ? '20px' : '12px'} 0`,
             }))), mergeDeep({
                 '&::before': Object.assign({ content: '""', position: 'absolute', borderRadius: borderRadiusSmall, left: '-4px', right: '-4px' }, (compact
                     ? {
@@ -3983,41 +3945,37 @@ const getComponentCss$Y = (size, compact, open, theme) => {
                 }, '&:not(:focus-visible)::before': {
                     border: 0,
                 } }),
-        } }, (!compact && {
-        root: {
-            borderBottom: border,
         },
-    })), { heading: {
+        heading: {
             margin: 0,
-            padding: 0,
-        }, icon: {
+            padding: '0 0 2px',
+        },
+        icon: {
             width: fontLineHeight,
             height: fontLineHeight,
-            transformOrigin: '50% 50%',
             transform: open ? 'rotate3d(0)' : 'rotate3d(0,0,1,90deg)',
             transition: getTransition('transform'),
-        }, collapsible: Object.assign({ color: primaryColor, padding: 0, overflow: 'hidden' }, (open
+        },
+        collapsible: Object.assign({ color: primaryColor, overflow: 'hidden' }, (open
             ? {
                 height: 'auto',
                 paddingBottom: compact ? spacingStaticSmall : '24px',
                 visibility: 'visible',
-                transition: getTransition('height') + `,visibility ${transitionDuration}`,
-                animation: `$open ${transitionDuration} ease forwards`,
+                transition: getTransition('height') + ',' + getTransition('padding-bottom'),
+                animation: `$open 0s ${transitionDuration} forwards`, // delay overflow change and have `overflow: visible` after transition
             }
             : {
                 height: 0,
                 visibility: 'hidden',
-                transition: getTransition('height') + `,visibility ${transitionDuration} linear ${transitionDuration}`,
-            })), 
+                transition: getTransition('height') + `,visibility 0s linear ${transitionDuration}`,
+            })),
         // TODO: this doesn't get shortened and results in `keyframes-open` for some unknown reason
         '@keyframes open': {
-            '0%,99%': {
-                overflow: 'hidden',
-            },
-            '100%': {
+            to: {
                 overflow: 'visible',
             },
-        } }));
+        },
+    });
 };
 
 const TOAST_Z_INDEX = 999999;
@@ -4113,7 +4071,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
             fontSize: getFontSizeText(sizeValue),
         })))), { '&::before': Object.assign(Object.assign(Object.assign({ content: '""', position: 'absolute', top: offsetVertical, bottom: offsetVertical }, buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
                 right: hideLabelValue ? offsetVertical : offsetHorizontal,
-                left: hideLabelValue || hasIcon ? offsetVertical : offsetHorizontal,
+                left: hideLabelValue ? offsetVertical : offsetHorizontal,
             }))), { borderRadius: borderRadiusSmall, transition: getTransition('background-color') }), (active && Object.assign(Object.assign({}, frostedGlassStyle), { backgroundColor: hoverColor }))) }), (!isDisabledOrLoading &&
             hoverMediaQuery({
                 '&:hover::before': Object.assign(Object.assign({}, frostedGlassStyle), { backgroundColor: hoverColor }),
@@ -4132,6 +4090,12 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
             flexShrink: '0',
             width: fontLineHeight,
             height: fontLineHeight,
+            // workaround for Safari to optimize vertical alignment of icons
+            // TODO: check if this is still needed after optimized icons are included
+            '@supports (width: round(down, 1px, 1px))': {
+                width: `round(down, ${fontLineHeight}, 1px)`,
+                height: `round(down, ${fontLineHeight}, 1px)`,
+            },
         },
         label: mergeDeep(buildResponsiveStyles(hideLabel, getVisibilityJssStyle), buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
             order: alignLabelValue === 'left' ? -1 : 0,
@@ -4208,7 +4172,7 @@ const getTileBaseStyles = (aspectRatio, isDisabled) => {
                 },
             },
         })),
-        root: Object.assign(Object.assign({ position: 'relative', height: 0, overflow: 'hidden', transform: 'translate3d(0,0,0)', borderRadius: borderRadiusMedium, color: getThemedTypographyColor('dark', 'primary') }, buildResponsiveStyles(aspectRatio, (ratio) => ({
+        root: Object.assign(Object.assign({ position: 'relative', overflow: 'hidden', transform: 'translate3d(0,0,0)', borderRadius: borderRadiusLarge, color: getThemedTypographyColor('dark', 'primary') }, buildResponsiveStyles(aspectRatio, (ratio) => ({
             paddingTop: aspectRatioPaddingMap[ratio],
         }))), (!isDisabled &&
             hoverMediaQuery({
@@ -4224,7 +4188,7 @@ const getTileBaseStyles = (aspectRatio, isDisabled) => {
             display: 'flex',
             justifyItems: 'start',
             gap: spacingStaticMedium,
-            borderRadius: borderRadiusMedium,
+            borderRadius: borderRadiusLarge,
             '@media (forced-colors: active)': {
                 background: 'rgba(0,0,0,0.7)',
             },
@@ -4271,6 +4235,7 @@ const { primaryColor: darkThemePrimaryColor$1 } = getThemedColors('dark');
 const { primaryColor: lightThemePrimaryColor$1 } = getThemedColors('light');
 const getVariantColors = (variant, theme) => {
     const { primaryColor, contrastHighColor, contrastMediumColor, hoverColor } = getThemedColors(theme);
+    const { canvasColor } = getHighContrastColors();
     const colors = {
         primary: {
             textColor: theme === 'dark' ? lightThemePrimaryColor$1 : darkThemePrimaryColor$1,
@@ -4283,7 +4248,7 @@ const getVariantColors = (variant, theme) => {
             textColor: primaryColor,
             borderColor: primaryColor,
             borderColorHover: contrastMediumColor,
-            backgroundColor: 'transparent',
+            backgroundColor: isHighContrastMode ? canvasColor : 'transparent',
             backgroundColorHover: hoverColor,
         },
     };
@@ -4307,18 +4272,8 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
             },
         })), (!isDisabledOrLoading &&
             hoverMediaQuery({
-                '&:hover': Object.assign({ backgroundColor: backgroundColorHover, borderColor: borderColorHover }, (!isPrimary && frostedGlassStyle)),
-            }))), label: Object.assign({}, buildResponsiveStyles(hideLabel, (hideLabelValue) => hideLabelValue
-            ? {
-                width: 0,
-                height: '1px',
-                textIndent: '-999999px',
-            }
-            : {
-                width: 'auto',
-                height: 'auto',
-                textIndent: 0,
-            })) }, (hasIcon && {
+                '&:hover': Object.assign({ backgroundColor: backgroundColorHover, borderColor: isHighContrastMode ? focusColor : borderColorHover }, (!isPrimary && frostedGlassStyle)),
+            }))), label: buildResponsiveStyles(hideLabel, getHiddenTextJssStyle) }, (hasIcon && {
         icon: {
             width: fontLineHeight,
             height: fontLineHeight,
@@ -4328,16 +4283,17 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
 
 const getDisabledColors = (variant, loading, theme) => {
     const { contrastMediumColor, contrastHighColor, disabledColor, hoverColor } = getThemedColors(theme);
+    const { canvasColor } = getHighContrastColors();
     const colors = {
         primary: {
-            textColor: contrastHighColor,
-            borderColor: loading ? contrastHighColor : disabledColor,
-            backgroundColor: loading ? contrastHighColor : disabledColor,
+            textColor: isHighContrastMode ? disabledColor : contrastHighColor,
+            borderColor: isHighContrastMode ? disabledColor : loading ? contrastHighColor : disabledColor,
+            backgroundColor: isHighContrastMode ? canvasColor : loading ? contrastHighColor : disabledColor,
         },
         secondary: {
             textColor: disabledColor,
-            borderColor: loading ? contrastMediumColor : disabledColor,
-            backgroundColor: loading ? hoverColor : 'transparent',
+            borderColor: isHighContrastMode ? disabledColor : loading ? contrastMediumColor : disabledColor,
+            backgroundColor: isHighContrastMode ? canvasColor : loading ? hoverColor : 'transparent',
         },
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
@@ -4383,6 +4339,7 @@ const spacingMap = {
 };
 const getComponentCss$S = (width, hasPagination, alignHeader, theme) => {
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
+    const { canvasTextColor } = getHighContrastColors();
     const isHeaderAlignCenter = alignHeader === 'center';
     return getCss(Object.assign({ '@global': {
             ':host': addImportantToEachRule(Object.assign({ display: 'flex', gap: spacingFluidMedium, flexDirection: 'column', boxSizing: 'content-box' }, hostHiddenStyles)),
@@ -4393,22 +4350,18 @@ const getComponentCss$S = (width, hasPagination, alignHeader, theme) => {
                 [mediaQueryS]: isHeaderAlignCenter
                     ? {
                         gridColumn: 2,
-                        textAlign: 'center', // relevant when text becomes multiline
                     }
                     : {
                         gridColumn: '1 / 3',
                     },
             }),
-        }, header: {
-            display: 'grid',
-            padding: `0 ${spacingMap[width].base}`,
-            [mediaQueryS]: Object.assign(Object.assign({ fontFamily, fontSize: fontSizeTextSmall, columnGap: spacingStaticMedium, gridTemplateColumns: `${buttonGroupWidth} minmax(0px, 1fr) ${buttonGroupWidth}` }, (isHeaderAlignCenter && {
+        }, header: Object.assign(Object.assign({ display: 'grid', padding: `0 ${spacingMap[width].base}` }, (isHeaderAlignCenter && {
+            textAlign: 'center',
+        })), { [mediaQueryS]: Object.assign(Object.assign({ fontFamily, fontSize: fontSizeTextSmall, columnGap: spacingStaticMedium, gridTemplateColumns: `${buttonGroupWidth} minmax(0px, 1fr) ${buttonGroupWidth}` }, (isHeaderAlignCenter && {
                 justifyItems: 'center', // relevant when max-width of heading or description is reached
-            })), { padding: `0 ${spacingMap[width].s}` }),
-            [mediaQueryXXL]: {
+            })), { padding: `0 ${spacingMap[width].s}` }), [mediaQueryXXL]: {
                 padding: `0 ${spacingMap[width].xxl}`,
-            },
-        }, nav: {
+            } }), nav: {
             display: 'none',
             [mediaQueryS]: {
                 display: 'flex',
@@ -4439,21 +4392,21 @@ const getComponentCss$S = (width, hasPagination, alignHeader, theme) => {
                 } }),
             '&__list': Object.assign({ display: 'flex', height: '100%' }, getBackfaceVisibilityJssStyle()),
             '&__slide': Object.assign(Object.assign({ position: 'relative', flexShrink: 0 }, getBackfaceVisibilityJssStyle()), { transform: 'translateZ(0)' }),
-            '&__sr': getScreenReaderOnlyJssStyle(), // appears in the DOM when sliding
+            '&__sr': getHiddenTextJssStyle(), // appears in the DOM when sliding
         } }, (hasPagination && {
         pagination: Object.assign(Object.assign({}, buildResponsiveStyles(hasPagination, (hasPaginationValue) => ({
             display: hasPaginationValue ? 'flex' : 'none',
         }))), { justifyContent: 'center', gap: spacingStaticSmall }),
         bullet: {
             borderRadius: borderRadiusSmall,
-            background: contrastMediumColor,
+            background: isHighContrastMode ? canvasTextColor : contrastMediumColor,
             // set transition to have the same speed as switching slides in splide
             transition: `background-color ${carouselTransitionDuration}ms, width ${carouselTransitionDuration}ms`,
             width: '8px',
             height: '8px',
         },
         [bulletActiveClass]: {
-            background: primaryColor,
+            background: isHighContrastMode ? canvasTextColor : primaryColor,
             width: '20px',
         },
     })));
@@ -4481,12 +4434,18 @@ const getFunctionalComponentStateMessageStyles = (theme, state) => {
     };
 };
 
-const getCheckboxRadioJssStyle = (hideLabel, state, isDisabled, theme) => {
+const getCheckboxRadioJssStyle = (hideLabel, state, isDisabled, isLoading, theme) => {
     const { primaryColor, contrastMediumColor, contrastHighColor, disabledColor, focusColor } = getThemedColors(theme);
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
-    const uncheckedColor = isDisabled ? disabledColor : formStateColor || contrastMediumColor;
+    const { canvasTextColor } = getHighContrastColors();
+    const disabledOrLoading = isDisabledOrLoading(isDisabled, isLoading);
+    const uncheckedColor = disabledOrLoading ? disabledColor : formStateColor || contrastMediumColor;
     const uncheckedHoverColor = formStateHoverColor || primaryColor;
-    const checkedColor = isDisabled ? disabledColor : formStateColor || primaryColor;
+    const checkedColor = isHighContrastMode
+        ? canvasTextColor
+        : disabledOrLoading
+            ? disabledColor
+            : formStateColor || primaryColor;
     const checkedHoverColor = formStateHoverColor || contrastHighColor;
     return Object.assign(Object.assign({ '@global': {
             ':host': addImportantToEachRule(Object.assign(Object.assign({}, hostHiddenStyles), { display: 'block' })),
@@ -4503,56 +4462,77 @@ const getCheckboxRadioJssStyle = (hideLabel, state, isDisabled, theme) => {
                     WebkitAppearance: 'none',
                     appearance: 'none',
                     boxSizing: 'content-box',
-                    backgroundSize: fontLineHeight,
-                    backgroundColor: 'transparent',
+                    background: `transparent 0% 0% / ${fontLineHeight}`,
                     transition: ['border-color', 'background-color'].map(getTransition).join(),
                     border: `2px solid ${uncheckedColor}`,
                     outline: 0,
-                    cursor: isDisabled ? 'not-allowed' : 'pointer',
+                    cursor: disabledOrLoading ? 'not-allowed' : 'pointer',
                 }, '&(input:checked)': {
+                    // background-image is merged in later
                     borderColor: checkedColor,
                     backgroundColor: checkedColor,
-                } }, (!isDisabled && Object.assign(Object.assign({}, hoverMediaQuery({
-                '&(input:hover), .text:hover ~ &(input)': {
-                    borderColor: uncheckedHoverColor,
-                },
-                '&(input:checked:hover), .text:hover ~ &(input:checked)': {
-                    borderColor: checkedHoverColor,
-                    backgroundColor: checkedHoverColor,
-                },
-            })), { '&(input:focus)::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-6)), { border: `${borderWidthBase} solid ${focusColor}` }), '&(input:focus:not(:focus-visible))::before': {
+                } }, (!disabledOrLoading && Object.assign(Object.assign({}, (!isHighContrastMode &&
+                hoverMediaQuery({
+                    '&(input:hover), .text:hover ~ &(input)': {
+                        borderColor: uncheckedHoverColor,
+                    },
+                    '&(input:checked:hover), .text:hover ~ &(input:checked)': {
+                        borderColor: checkedHoverColor,
+                        backgroundColor: checkedHoverColor,
+                    },
+                }))), (!isDisabled && {
+                '&(input:focus)::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-6)), { border: `${borderWidthBase} solid ${focusColor}` }),
+                '&(input:focus:not(:focus-visible))::before': {
                     borderColor: 'transparent',
-                } })))),
+                },
+            }))))),
             label: {
                 position: 'relative',
                 display: 'flex',
                 alignItems: 'flex-start',
             },
-        }, text: Object.assign(Object.assign(Object.assign({ order: 1, cursor: isDisabled ? 'default' : 'pointer' }, textSmallStyle), { color: isDisabled ? disabledColor : primaryColor, transition: getTransition('color') }), buildResponsiveStyles(hideLabel, getFormCheckboxRadioHiddenJssStyle)) }, getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state));
+        }, text: Object.assign(Object.assign(Object.assign({ order: 1, cursor: disabledOrLoading ? 'default' : 'pointer' }, textSmallStyle), { color: disabledOrLoading ? disabledColor : primaryColor, transition: getTransition('color') }), buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { padding: `2px 0 0 ${spacingStaticSmall}` }))) }, getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state));
 };
 
 const getInlineSVGBackgroundImage = (path) => {
     return `url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">${path}</svg>')`;
 };
 
-const getComponentCss$R = (hideLabel, state, isDisabled, theme) => {
-    const checkedIconColor = getThemedColors(theme === 'light' ? 'dark' : 'light').primaryColor.replace(/#/g, '%23');
-    const indeterminateIconColor = getThemedColors(theme).primaryColor.replace(/#/g, '%23');
-    return getCss(mergeDeep(getCheckboxRadioJssStyle(hideLabel, state, isDisabled, theme), {
-        '@global': {
-            '::slotted': addImportantToEachRule(Object.assign({ '&(input)': {
+const getComponentCss$R = (hideLabel, state, isDisabled, isLoading, theme) => {
+    const { canvasColor } = getHighContrastColors();
+    const checkedIconColor = isHighContrastMode
+        ? canvasColor
+        : getInvertedThemedColors(theme).primaryColor.replace(/#/g, '%23');
+    const indeterminateIconColor = isHighContrastMode
+        ? canvasColor
+        : getThemedColors(theme).primaryColor.replace(/#/g, '%23');
+    return getCss(mergeDeep(getCheckboxRadioJssStyle(hideLabel, state, isDisabled, isLoading, theme), Object.assign({ '@global': {
+            '::slotted': addImportantToEachRule(Object.assign(Object.assign(Object.assign({ '&(input)': {
                     borderRadius: borderRadiusSmall,
-                }, '&(input:checked)': {
+                } }, (!isLoading && {
+                '&(input:checked)': {
                     backgroundImage: getInlineSVGBackgroundImage(`<path fill="${checkedIconColor}" d="m20.22,7.47l-1.47-1.42-9.26,9.02-4.24-4.15-1.47,1.42,5.71,5.6,10.73-10.47Z"/>`),
-                }, '&(input:indeterminate)': {
+                },
+            })), { '&(input:indeterminate)': {
                     backgroundImage: getInlineSVGBackgroundImage(`<path fill="${indeterminateIconColor}" d="m20,11v2H4v-2h16Z"/>`),
-                } }, (!isDisabled && {
+                } }), (!isDisabled && {
                 '&(input:focus)::before': {
                     borderRadius: borderRadiusMedium,
                 },
             }))),
+        } }, (isLoading && {
+        spinner: {
+            position: 'absolute',
+            top: `calc(${fontLineHeight}/2 + 2px)`,
+            left: `calc(${fontLineHeight}/2 + 2px)`,
+            transform: 'translate(-50%, -50%)',
+            height: fontLineHeight,
+            width: fontLineHeight,
+            fontFamily,
+            fontSize: '1rem',
+            cursor: 'not-allowed',
         },
-    }));
+    }))));
 };
 
 const widthMap = {
@@ -4581,19 +4561,33 @@ const getComponentCss$Q = (width) => {
     });
 };
 
+const crestSize = {
+    width: 30,
+    height: 40,
+};
+
+const { width, height } = crestSize;
+const getDimensionStyle = {
+    maxWidth: `${width}px`,
+    maxHeight: `${height}px`,
+    width: 'inherit',
+    height: 'inherit',
+};
 const getComponentCss$P = () => {
     return getCss({
         '@global': {
-            ':host': Object.assign({ position: 'relative', display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(Object.assign({ outline: 0 }, hostHiddenStyles))),
-            a: Object.assign({ display: 'block', textDecoration: 'none' }, focusPseudoJssStyle),
+            ':host': Object.assign({ position: 'relative', display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(Object.assign(Object.assign({ outline: 0, boxSizing: 'content-box' }, getDimensionStyle), hostHiddenStyles))),
+            a: Object.assign(Object.assign({ display: 'block', textDecoration: 'none' }, getDimensionStyle), focusPseudoJssStyle),
             picture: {
                 display: 'block',
-                width: '30px',
-                height: '40px',
+                width: `min(${width}px, 100%)`,
+                height: `min(${height}px, 100%)`,
             },
             img: {
                 display: 'block',
-                width: '100%',
+                maxWidth: '100%',
+                maxHeight: '100%',
+                width: 'auto',
                 height: 'auto',
             },
         },
@@ -4659,7 +4653,7 @@ const getComponentCss$N = (color, orientation, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
-            hr: Object.assign({ margin: 0, padding: 0, border: 'none', textAlign: 'left', background: colorMap[color] }, buildResponsiveStyles(orientation, (o) => o === 'horizontal' ? { height: '1px', width: '100%' } : { height: '100%', width: '1px' })),
+            hr: Object.assign({ margin: 0, padding: 0, border: 'none', textAlign: 'left', background: isHighContrastMode ? getHighContrastColors().canvasTextColor : colorMap[color] }, buildResponsiveStyles(orientation, (o) => o === 'horizontal' ? { height: '1px', width: '100%' } : { height: '100%', width: '1px' })),
         },
     });
 };
@@ -4910,10 +4904,12 @@ const getComponentCss$E = (color, size, theme) => {
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
     return getCss({
-        '@global': Object.assign({ ':host': Object.assign({ display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(hostHiddenStyles)), img: Object.assign(Object.assign({ display: 'block', margin: 0, padding: 0 }, (!isColorInherit && {
-                filter: filter[theme][color],
-                WebkitAnimation: `${isDark ? keyFramesDark : keyFramesLight} 1ms`, // needed to enforce repaint in Safari if theme is switched programmatically.
-            })), (isSizeInherit
+        '@global': Object.assign({ ':host': Object.assign({ display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(hostHiddenStyles)), img: Object.assign(Object.assign({ display: 'block', margin: 0, padding: 0 }, (!isColorInherit && Object.assign(Object.assign({ filter: filter[theme][color] }, (isHighContrastMode &&
+                getSchemedHighContrastMediaQuery({
+                    filter: filter.light[color],
+                }, {
+                    filter: filter.dark[color],
+                }))), { WebkitAnimation: `${isDark ? `${keyFramesDark}-${color}` : `${keyFramesLight}-${color}`} 1ms` }))), (isSizeInherit
                 ? {
                     width: size,
                     height: size,
@@ -4923,7 +4919,7 @@ const getComponentCss$E = (color, size, theme) => {
                     height: fontLineHeight,
                     font: `${sizeMap$2[size]} ${fontFamily}`,
                 })) }, (!isColorInherit && {
-            [`@keyframes ${isDark ? keyFramesDark : keyFramesLight}`]: forceRerenderAnimationStyle,
+            [`@keyframes ${isDark ? `${keyFramesDark}-${color}` : `${keyFramesLight}-${color}`}`]: forceRerenderAnimationStyle,
         })),
     });
 };
@@ -4942,20 +4938,14 @@ const getBackgroundColor = (state, theme) => {
     return colorMap[state];
 };
 const getNotificationRootJssStyle = (state, hasAction, hasClose, theme) => {
-    return {
-        display: 'grid',
+    return Object.assign(Object.assign({ display: 'grid', 
         // 2 columns for content and optional close button
-        gridTemplateColumns: `minmax(auto, 1fr)${hasClose ? ' auto' : ''}`,
-        gap: spacingStaticMedium,
-        placeItems: 'start',
-        padding: spacingStaticMedium,
-        background: getBackgroundColor(state, theme),
-        borderRadius: borderRadiusSmall,
-        [mediaQueryMinS$1]: {
+        gridTemplateColumns: `minmax(auto, 1fr)${hasClose ? ' auto' : ''}`, gap: spacingStaticMedium, placeItems: 'start', padding: spacingStaticMedium, background: getBackgroundColor(state, theme), borderRadius: borderRadiusSmall }, (isHighContrastMode && {
+        outline: '1px solid transparent',
+    })), { [mediaQueryMinS$1]: {
             // 4 columns are for icon, content, optional action button and optional close button
             gridTemplateColumns: `auto minmax(auto, 1fr)${hasAction ? ' auto' : ''}${hasClose ? ' auto' : ''}`,
-        },
-    };
+        } });
 };
 const getNotificationIconJssStyle = () => ({
     [mediaQueryMaxS$1]: {
@@ -4992,7 +4982,6 @@ const getComponentCss$D = (state, hasAction, hasClose, theme) => {
 
 const getComponentCss$C = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
-    const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme), Object.assign(Object.assign({}, (hasSlottedAnchor && {
         '@global': addImportantToEachRule({
             '::slotted': {
@@ -5002,7 +4991,7 @@ const getComponentCss$C = (icon, iconSource, active, stretch, size, hideLabel, a
                 // (https://bugs.webkit.org/show_bug.cgi?id=178237)
                 '&(a)::before': Object.assign({ content: '""', position: 'fixed', top: offsetVertical, bottom: offsetVertical, borderRadius: borderRadiusSmall }, buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
                     right: hideLabelValue ? offsetVertical : offsetHorizontal,
-                    left: hideLabelValue || hasIcon ? offsetVertical : offsetHorizontal,
+                    left: hideLabelValue ? offsetVertical : offsetHorizontal,
                 }))),
                 '&(a:focus)::before': {
                     border: `${borderWidthBase} solid ${focusColor}`,
@@ -5019,8 +5008,12 @@ const getComponentCss$C = (icon, iconSource, active, stretch, size, hideLabel, a
 
 const getComponentCss$B = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
-    return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, theme), Object.assign({}, (hasSlottedAnchor && {
-        '@global': addImportantToEachRule({
+    const { linkColor } = getHighContrastColors();
+    return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, theme), Object.assign({}, (hasSlottedAnchor && Object.assign(Object.assign({}, (isHighContrastMode && {
+        root: {
+            borderColor: linkColor,
+        },
+    })), { '@global': addImportantToEachRule({
             '::slotted': {
                 '&(a)': Object.assign(Object.assign({}, getResetInitialStylesForSlottedAnchor), { outline: 0, textDecoration: 'none', font: 'inherit', color: 'inherit' }),
                 // The clickable area for Safari < ~15 (<= release date: 2021-10-28) is reduced to the slotted anchor itself,
@@ -5038,10 +5031,10 @@ const getComponentCss$B = (icon, iconSource, variant, hideLabel, hasSlottedAncho
                     border: 0,
                 },
             },
-        }),
-    }))));
+        }) })))));
 };
 
+// array is redefined instead of using the one from in model-signature
 const LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS = ['h2', 'h3', 'h4', 'h5', 'h6'];
 
 const getComponentCss$A = (aspectRatio, weight, direction, hasDescription) => {
@@ -5093,7 +5086,7 @@ const getComponentCss$y = (size) => {
 
 const mediaQueryXl = getMediaQueryMin('xl');
 const { backgroundColor, primaryColor: lightThemePrimaryColor } = getThemedColors('light');
-const { primaryColor: darkThemePrimaryColor } = getThemedColors('dark');
+const { primaryColor: darkThemePrimaryColor, contrastHighColor: darkThemeContrastHighColor } = getThemedColors('dark');
 const transitionTimingFunction = 'cubic-bezier(.16,1,.3,1)';
 const stretchToFullModalWidthClassName = 'stretch-to-full-modal-width';
 const getFullscreenJssStyles = (fullscreen) => {
@@ -5176,7 +5169,7 @@ const getComponentCss$x = (isOpen, isFullscreen, hasDismissButton, hasHeader) =>
             transition: `opacity ${duration} ${transitionTimingFunction},transform ${duration} ${transitionTimingFunction}`,
             padding: hasDismissButton ? `${pxToRemWithUnit(32)} 32px 32px 32px` : '32px',
             background: backgroundColor,
-            outline: 0,
+            outline: isHighContrastMode ? '1px solid transparent' : 0,
             '&:focus::before': Object.assign({ content: '""', position: 'fixed', border: `${borderWidthBase} solid`, pointerEvents: 'none' }, buildResponsiveStyles(isFullscreen, (fullscreenValue) => (Object.assign({ borderRadius: fullscreenValue ? 0 : '12px', borderColor: fullscreenValue ? lightThemePrimaryColor : darkThemePrimaryColor }, getInsetJssStyle(fullscreenValue ? 0 : -4))))),
             '&:not(:focus-visible)::before': {
                 border: 0,
@@ -5191,13 +5184,15 @@ const getComponentCss$x = (isOpen, isFullscreen, hasDismissButton, hasHeader) =>
     })), (hasDismissButton && {
         dismiss: Object.assign({ position: 'absolute', top: '8px', right: '8px', border: `2px solid ${backgroundColor}`, borderRadius: '4px', background: backgroundColor }, hoverMediaQuery({
             '&:hover': {
-                background: 'transparent',
-                borderColor: 'transparent',
+                background: darkThemeContrastHighColor,
+                borderColor: darkThemeContrastHighColor,
             },
         })),
     })));
 };
 
+const modelSignatureHeight = 36;
+
 const colorToFilterMap = {
     light: {
         primary: filterLightPrimary,
@@ -5217,8 +5212,18 @@ const getComponentCss$w = (size, color, theme) => {
     const isColorInherit = color === 'inherit';
     return getCss({
         '@global': {
-            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
-            img: Object.assign(Object.assign({ display: 'block', pointerEvents: 'none' }, (!isColorInherit && { filter: colorToFilterMap[theme][color] })), (isSizeInherit && { height: size })),
+            ':host': Object.assign({ display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(Object.assign(Object.assign({ maxWidth: '100%', maxHeight: '100%' }, (!isSizeInherit && {
+                width: 'inherit',
+                height: 'inherit',
+                // TODO: we need a width map of all signatures to ensure same fluid behavior like implemented fro crest + wordmark
+                maxHeight: `${modelSignatureHeight}px`,
+            })), hostHiddenStyles))),
+            img: Object.assign(Object.assign({ display: 'block', maxWidth: '100%', maxHeight: '100%', pointerEvents: 'none' }, (!isColorInherit && Object.assign({ filter: colorToFilterMap[theme][color] }, (isHighContrastMode &&
+                getSchemedHighContrastMediaQuery({
+                    filter: colorToFilterMap.light[color],
+                }, {
+                    filter: colorToFilterMap.dark[color],
+                }))))), (isSizeInherit && { height: size })),
         },
     });
 };
@@ -5278,7 +5283,7 @@ const getComponentCss$v = (maxNumberOfPageLinks, theme) => {
 };
 
 const { backgroundColor: backgroundColorThemeLight, primaryColor: primaryColorThemeLight } = getThemedColors('light');
-const mediaQueryForcedColors = '@media (forced-colors: active)';
+const { canvasColor, canvasTextColor } = getHighContrastColors();
 const directionPositionMap = {
     top: {
         bottom: '100%',
@@ -5303,8 +5308,6 @@ const directionPositionMap = {
 };
 const borderWidth = '12px';
 const transparentColor = 'transparent';
-const canvas = 'canvas';
-const canvasText = 'canvastext';
 const join = (...arr) => arr.join(' ');
 const directionArrowMap = {
     top: {
@@ -5312,40 +5315,36 @@ const directionArrowMap = {
         left: '50%',
         transform: 'translateX(-50%)',
         borderWidth: join(borderWidth, borderWidth, 0),
-        borderColor: join(backgroundColorThemeLight, transparentColor, transparentColor),
-        [mediaQueryForcedColors]: {
-            borderColor: join(canvasText, canvas, canvas),
-        },
+        borderColor: isHighContrastMode
+            ? join(canvasTextColor, canvasColor, canvasColor)
+            : join(backgroundColorThemeLight, transparentColor, transparentColor),
     },
     right: {
         top: '50%',
         right: 0,
         transform: 'translateY(-50%)',
         borderWidth: join(borderWidth, borderWidth, borderWidth, 0),
-        borderColor: join(transparentColor, backgroundColorThemeLight, transparentColor, transparentColor),
-        [mediaQueryForcedColors]: {
-            borderColor: join(canvas, canvasText, canvas, canvas),
-        },
+        borderColor: isHighContrastMode
+            ? join(canvasColor, canvasTextColor, canvasColor, canvasColor)
+            : join(transparentColor, backgroundColorThemeLight, transparentColor, transparentColor),
     },
     bottom: {
         bottom: 0,
         left: '50%',
         transform: 'translateX(-50%)',
         borderWidth: join(0, borderWidth, borderWidth),
-        borderColor: join(transparentColor, transparentColor, backgroundColorThemeLight),
-        [mediaQueryForcedColors]: {
-            borderColor: join(canvas, canvas, canvasText),
-        },
+        borderColor: isHighContrastMode
+            ? join(canvasColor, canvasColor, canvasTextColor)
+            : join(transparentColor, transparentColor, backgroundColorThemeLight),
     },
     left: {
         top: '50%',
         left: 0,
         transform: 'translateY(-50%)',
         borderWidth: join(borderWidth, 0, borderWidth, borderWidth),
-        borderColor: join(transparentColor, transparentColor, transparentColor, backgroundColorThemeLight),
-        [mediaQueryForcedColors]: {
-            borderColor: join(canvas, canvas, canvas, canvasText),
-        },
+        borderColor: isHighContrastMode
+            ? join(canvasColor, canvasColor, canvasColor, canvasTextColor)
+            : join(transparentColor, transparentColor, transparentColor, backgroundColorThemeLight),
     },
 };
 const getComponentCss$u = (direction, theme) => {
@@ -5364,7 +5363,7 @@ const getComponentCss$u = (direction, theme) => {
                     borderColor: 'transparent',
                 } }),
         },
-        label: getTextHiddenJssStyle(true),
+        label: getHiddenTextJssStyle(),
         icon: {
             display: 'inline-block',
             transform: 'translate3d(0,0,0)', // Fixes movement on hover in Safari
@@ -5383,9 +5382,9 @@ const getComponentCss$u = (direction, theme) => {
                 ,
             '&::before': Object.assign({ content: '""', position: 'absolute', borderStyle: 'solid' }, directionArrowMap[direction]),
         },
-        popover: Object.assign(Object.assign(Object.assign({ position: 'absolute', maxWidth: 'min(90vw, 27rem)', width: 'max-content', boxSizing: 'border-box', background: backgroundColorThemeLight, padding: '8px 16px', pointerEvents: 'auto' }, directionPositionMap[direction]), textSmallStyle), { listStyleType: 'none', color: primaryColorThemeLight, whiteSpace: 'inherit', borderRadius: borderRadiusSmall, [mediaQueryForcedColors]: {
-                outline: `1px solid ${canvasText}`,
-            } }),
+        popover: Object.assign(Object.assign(Object.assign(Object.assign({ position: 'absolute', maxWidth: 'min(90vw, 27rem)', width: 'max-content', boxSizing: 'border-box', background: backgroundColorThemeLight, padding: '8px 16px', pointerEvents: 'auto' }, directionPositionMap[direction]), textSmallStyle), { listStyleType: 'none', color: primaryColorThemeLight, whiteSpace: 'inherit', borderRadius: borderRadiusSmall }), (isHighContrastMode && {
+            outline: `1px solid ${canvasTextColor}`,
+        })),
         '@keyframes fadeIn': {
             from: {
                 opacity: 0,
@@ -5398,8 +5397,10 @@ const getComponentCss$u = (direction, theme) => {
 };
 
 const getComponentCss$t = (hideLabel, state, isDisabled, theme) => {
-    const checkedIconColor = getThemedColors(theme === 'light' ? 'dark' : 'light').primaryColor.replace(/#/g, '%23');
-    return getCss(mergeDeep(getCheckboxRadioJssStyle(hideLabel, state, isDisabled, theme), {
+    const checkedIconColor = isHighContrastMode
+        ? getHighContrastColors().canvasColor
+        : getInvertedThemedColors(theme).primaryColor.replace(/#/g, '%23');
+    return getCss(mergeDeep(getCheckboxRadioJssStyle(hideLabel, state, isDisabled, false, theme), {
         '@global': {
             '::slotted': addImportantToEachRule(Object.assign({ '&(input)': {
                     borderRadius: '50%',
@@ -5517,10 +5518,11 @@ const ICON_SIZE = pxToRemWithUnit(24);
 const ICON_MARGIN = pxToRemWithUnit(4);
 const getColors$2 = (isDisabled, isSelected, theme) => {
     const { primaryColor, contrastMediumColor, disabledColor, contrastLowColor } = getThemedColors(theme);
+    const { highlightColor } = getHighContrastColors();
     return {
         buttonColor: isDisabled ? disabledColor : primaryColor,
         labelColor: isDisabled ? disabledColor : contrastMediumColor,
-        borderColor: isSelected ? primaryColor : contrastLowColor,
+        borderColor: isSelected ? (isHighContrastMode ? highlightColor : primaryColor) : contrastLowColor,
         hoverBorderColor: primaryColor,
     };
 };
@@ -5566,6 +5568,7 @@ const getComponentCss$q = (maxWidth) => {
         },
     });
 };
+
 const getBaseChildStyles = (child, state, theme, additionalDefaultJssStyle) => {
     const { primaryColor, contrastLowColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
@@ -5599,7 +5602,7 @@ const getLabelStyles = (child, isDisabled, hideLabel, state, theme, counterOrUni
             flexDirection: 'column',
             gap: spacingStaticXSmall,
             position: 'relative',
-            '&__text': Object.assign(Object.assign(Object.assign(Object.assign({ display: 'block' }, buildResponsiveStyles(hideLabel, getFormTextHiddenJssStyle)), textSmallStyle), { color: isDisabled ? disabledColor : primaryColor, transition: getTransition('color'), '&+&': Object.assign({ marginTop: `-${spacingStaticXSmall}`, fontSize: fontSizeTextXSmall }, (!isDisabled && {
+            '&__text': Object.assign(Object.assign(Object.assign(Object.assign({ display: 'block' }, buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, { width: 'fit-content' }))), textSmallStyle), { color: isDisabled ? disabledColor : primaryColor, transition: getTransition('color'), '&+&': Object.assign({ marginTop: `-${spacingStaticXSmall}`, fontSize: fontSizeTextXSmall }, (!isDisabled && {
                     color: contrastHighColor,
                 })) }), hoverMediaQuery({
                 '&:hover': {
@@ -5616,14 +5619,10 @@ const getLabelStyles = (child, isDisabled, hideLabel, state, theme, counterOrUni
         })),
     }));
 };
-const ICON_SPACE = `${24 + 13 * 2 + 2}px`; // 24px = icon width, 13px * 2 = padding, 2px = border
-const getComponentCss$p = (isDisabled, hideLabel, state, theme) => {
-    return getCss(Object.assign(Object.assign(Object.assign({ '@global': addImportantToEachRule(Object.assign({ ':host': Object.assign({ display: 'block' }, hostHiddenStyles) }, getBaseChildStyles('select', state, theme, {
-            position: 'static',
-            zIndex: 0,
-            cursor: 'pointer',
-            padding: `8px ${ICON_SPACE} 8px ${spacingStaticMedium}`,
-        }))), root: {
+
+const OPTION_HEIGHT = 40; // optgroups are higher and ignored
+const getComponentCss$p = (isDisabled, native, hideLabel, state, theme) => {
+    return getCss(Object.assign(Object.assign(Object.assign({ '@global': addImportantToEachRule(Object.assign({ ':host': Object.assign({ display: 'block' }, hostHiddenStyles) }, getBaseChildStyles('select', state, theme, Object.assign({ position: 'static', zIndex: 0, cursor: 'pointer', padding: `8px calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2) 8px ${spacingStaticMedium}` }, (!native && !isDisabled && { borderColor: 'transparent' }))))), root: {
             display: 'block',
             position: 'relative',
         } }, getLabelStyles('select', isDisabled, hideLabel, state, theme, {
@@ -5640,6 +5639,129 @@ const getComponentCss$p = (isDisabled, hideLabel, state, theme) => {
     })), getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state)));
 };
 
+const dropdownPositionVar = '--p-internal-dropdown-position';
+const getButtonStyles = (direction, isOpen, state, theme) => {
+    const { primaryColor, disabledColor, contrastMediumColor } = getThemedColors(theme);
+    const { formStateHoverColor, formStateColor } = getThemedFormStateColors(theme, state);
+    const isDirectionDown = direction === 'down';
+    return {
+        '@global': {
+            button: Object.assign(Object.assign(Object.assign({ position: 'absolute', top: 0, height: `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`, width: '100%', font: textSmallStyle.font.replace('ex', 'ex + 6px'), padding: 0, background: 'transparent', border: `${borderWidthBase} solid ${isOpen ? primaryColor : formStateColor || contrastMediumColor}`, borderRadius: borderRadiusSmall, outline: '0', cursor: 'pointer', transition: getTransition('border-color'), '&:focus, &:focus ~ ul': {
+                    borderColor: primaryColor,
+                } }, hoverMediaQuery({
+                '&:not(:disabled):not(:focus):hover': {
+                    borderColor: isOpen ? primaryColor : formStateHoverColor || primaryColor,
+                },
+            })), { '&:disabled': {
+                    cursor: 'not-allowed',
+                    borderColor: disabledColor,
+                } }), (isOpen && {
+                [isDirectionDown ? 'borderBottomLeftRadius' : 'borderTopLeftRadius']: 0,
+                [isDirectionDown ? 'borderBottomRightRadius' : 'borderTopRightRadius']: 0,
+            })),
+        },
+    };
+};
+const getFilterStyles = (direction, isOpen, state, disabled, theme) => {
+    const { primaryColor, backgroundColor, disabledColor, contrastMediumColor } = getThemedColors(theme);
+    const { formStateHoverColor, formStateColor } = getThemedFormStateColors(theme, state);
+    const isDirectionDown = direction === 'down';
+    const placeHolderJssStyle = {
+        opacity: 1,
+        color: disabled ? disabledColor : primaryColor,
+    };
+    return {
+        '@global': {
+            input: Object.assign(Object.assign(Object.assign(Object.assign({ display: 'block', position: 'absolute', zIndex: 1, bottom: '2px', left: '2px', width: `calc(100% - (${fontLineHeight} + 6px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2))`, height: `calc(${fontLineHeight} + 6px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`, font: textSmallStyle.font.replace('ex', 'ex + 6px'), padding: `13px ${spacingStaticMedium}`, outline: '0', appearance: 'none', boxSizing: 'border-box', border: '0', borderRadius: borderRadiusSmall, opacity: 0 }, textSmallStyle), { textIndent: 0, cursor: disabled ? 'not-allowed' : 'text', color: primaryColor, background: backgroundColor, '&::placeholder': placeHolderJssStyle, '&::-webkit-input-placeholder': placeHolderJssStyle, '&::-moz-placeholder': placeHolderJssStyle, '&:not(:disabled):focus': {
+                    opacity: 1,
+                    '&+span, &~ ul': {
+                        borderColor: primaryColor,
+                    },
+                } }), hoverMediaQuery({
+                '&:not(:disabled)': {
+                    '&+span:hover': {
+                        borderColor: isOpen ? primaryColor : formStateHoverColor || primaryColor,
+                    },
+                    '&:hover': {
+                        '&+span, &~ul': {
+                            borderColor: isOpen ? primaryColor : formStateHoverColor || primaryColor,
+                        },
+                    },
+                },
+            })), { '&+span': Object.assign(Object.assign(Object.assign({ 
+                    // for focus outline and clicking arrow since input ends left of the icon
+                    position: 'absolute' }, getInsetJssStyle()), { transition: getTransition('border-color'), pointerEvents: 'all', cursor: disabled ? 'not-allowed' : 'pointer', border: `${borderWidthBase} solid ${isOpen ? primaryColor : formStateColor || contrastMediumColor}`, borderRadius: borderRadiusSmall }), (isOpen && {
+                    [isDirectionDown ? 'borderBottomLeftRadius' : 'borderTopLeftRadius']: 0,
+                    [isDirectionDown ? 'borderBottomRightRadius' : 'borderTopRightRadius']: 0,
+                })) }),
+        },
+    };
+};
+const getListStyles = (direction, theme) => {
+    const isDirectionDown = direction === 'down';
+    const { primaryColor, backgroundColor, contrastMediumColor, contrastHighColor, backgroundSurfaceColor, disabledColor, } = getThemedColors(theme);
+    const { highlightColor } = getHighContrastColors();
+    return {
+        '@global': {
+            ul: Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', gap: spacingStaticSmall, position: `var(${dropdownPositionVar})`, padding: '6px', margin: 0, background: backgroundColor }, textSmallStyle), { zIndex: 10, left: 0, right: 0, [isDirectionDown ? 'top' : 'bottom']: 'calc(100% - 2px)', boxSizing: 'border-box', maxHeight: `${8.5 * (OPTION_HEIGHT + 8) + 6 + 2}px`, overflowY: 'auto', WebkitOverflowScrolling: 'touch', scrollBehavior: 'smooth', border: `2px solid ${primaryColor}`, [isDirectionDown ? 'borderTop' : 'borderBottom']: addImportantToRule(`1px solid ${contrastMediumColor}`) }), (isDirectionDown
+                ? ['borderBottomLeftRadius', 'borderBottomRightRadius']
+                : ['borderTopLeftRadius', 'borderTopRightRadius']).reduce((result, curr) => (Object.assign(Object.assign({}, result), { [curr]: borderRadiusSmall })), {})), { scrollbarWidth: 'thin', scrollbarColor: 'auto', transition: getTransition('border-color'), transform: 'translate3d(0,0,0)' }),
+        },
+        option: Object.assign(Object.assign({ display: 'flex', justifyContent: 'space-between', gap: '12px', padding: `${spacingStaticSmall} 12px`, flex: `1 0 calc(${fontLineHeight} + ${spacingStaticSmall} * 2)`, color: contrastHighColor, cursor: 'pointer', textAlign: 'left', wordBreak: 'break-word', boxSizing: 'border-box', borderRadius: borderRadiusSmall, transition: ['background-color', 'color'].map(getTransition).join(), '&[role=status]': {
+                cursor: 'not-allowed',
+            }, '&__sr': getHiddenTextJssStyle() }, hoverMediaQuery({
+            '&:not([aria-disabled]):not([role=status]):hover': {
+                color: isHighContrastMode ? highlightColor : primaryColor,
+                background: backgroundSurfaceColor,
+            },
+        })), { '&--highlighted, &--selected': {
+                color: isHighContrastMode ? highlightColor : primaryColor,
+                background: backgroundSurfaceColor,
+            }, '&--selected': {
+                cursor: 'default',
+                pointerEvents: 'none',
+            }, '&--disabled': {
+                cursor: 'not-allowed',
+                color: disabledColor,
+            }, '&--hidden': {
+                display: 'none',
+            } }),
+        optgroup: {
+            display: 'block',
+            padding: '3px 14px',
+            fontWeight: fontWeightSemiBold,
+            '&:not(:first-child)': {
+                marginTop: spacingStaticSmall,
+            },
+            '&~$option': {
+                paddingLeft: '24px',
+            },
+        },
+    };
+};
+const getComponentCss$o = (direction, isOpen, state, disabled, filter, theme) => {
+    const { primaryColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
+    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
+    return getCss(
+    // merge because of global styles
+    mergeDeep({
+        '@global': {
+            ':host': Object.assign({ [dropdownPositionVar]: 'absolute', display: 'block', position: `var(${dropdownPositionVar})`, font: textSmallStyle.font.replace('ex', 'ex + 6px'), marginTop: `calc(-1 * (${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2))`, paddingTop: `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`, left: 0, right: 0, color: disabled ? disabledColor : formStateColor || contrastMediumColor }, (!disabled &&
+                !isHighContrastMode &&
+                hoverMediaQuery({
+                    '&(:hover)': {
+                        color: formStateHoverColor || primaryColor,
+                    },
+                }))),
+        },
+        'sr-text': {
+            display: 'none',
+        },
+    }, filter
+        ? getFilterStyles(direction, isOpen, state, disabled, theme)
+        : getButtonStyles(direction, isOpen, state, theme), isOpen && getListStyles(direction, theme)));
+};
+
 const sizeSmall = '48px';
 const sizeMedium = '72px';
 const sizeLarge = '104px';
@@ -5653,6 +5775,7 @@ const getComponentCss$n = (size, theme) => {
     const strokeDasharray = '57'; // C = 2πR
     const animationDuration = 'var(--p-animation-duration, 2s)';
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
+    const { canvasColor, canvasTextColor } = getHighContrastColors();
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign({ display: 'inline-flex', verticalAlign: 'top' }, hostHiddenStyles)),
@@ -5665,13 +5788,13 @@ const getComponentCss$n = (size, theme) => {
             },
             circle: {
                 '&:first-child': {
-                    stroke: contrastMediumColor,
+                    stroke: isHighContrastMode ? canvasTextColor : contrastMediumColor,
                     animation: `$rotate ${animationDuration} linear infinite`, // needs to rotate to eliminate stutter in safari
                 },
                 '&:last-child': {
                     transformOrigin: '0 0',
                     animation: `$dash ${animationDuration} ease-in-out infinite`,
-                    stroke: primaryColor,
+                    stroke: isHighContrastMode ? canvasColor : primaryColor,
                     strokeDasharray: strokeDasharray
                         ,
                     strokeLinecap: 'round',
@@ -5701,7 +5824,7 @@ const getComponentCss$n = (size, theme) => {
             },
         },
         root: Object.assign(Object.assign({ display: 'block' }, buildResponsiveStyles(size, (s) => sizeMap$1[s])), { margin: 0, padding: 0, boxSizing: 'border-box', strokeWidth: 1.5 }),
-        'sr-only': getScreenReaderOnlyJssStyle(),
+        'sr-only': getHiddenTextJssStyle(),
     });
 };
 
@@ -5764,7 +5887,7 @@ const getComponentCss$m = (state, disabled, theme) => {
             height: fontLineHeight,
             width: fontLineHeight,
         },
-    })), { 'sr-only': getScreenReaderOnlyJssStyle() }));
+    })), { 'sr-only': getHiddenTextJssStyle() }));
 };
 
 const getComponentCss$l = (size) => {
@@ -5779,17 +5902,28 @@ const getComponentCss$l = (size) => {
 const getColors$1 = (checked, disabled, loading, theme) => {
     const { primaryColor, contrastMediumColor, successColor, successColorDarken, disabledColor } = getThemedColors(theme);
     const { backgroundColor: lightThemeBackgroundColor } = getThemedColors('light');
-    const checkedColor = successColor;
+    const { canvasColor, canvasTextColor } = getHighContrastColors();
+    const checkedColor = isHighContrastMode ? canvasTextColor : successColor;
     const disabledOrLoadingColor = isDisabledOrLoading(disabled, loading) && disabledColor;
     return {
         buttonBorderColor: disabledOrLoadingColor || (checked ? checkedColor : contrastMediumColor),
-        buttonBorderColorHover: checked ? successColorDarken : primaryColor,
+        buttonBorderColorHover: checked ? (isHighContrastMode ? primaryColor : successColorDarken) : primaryColor,
         buttonBackgroundColor: checked ? disabledOrLoadingColor || checkedColor : 'transparent',
-        buttonBackgroundColorHover: checked ? successColorDarken : 'transparent',
+        buttonBackgroundColorHover: checked ? (isHighContrastMode ? checkedColor : successColorDarken) : 'transparent',
         toggleBackgroundColor: (loading && 'transparent') ||
             (disabled && !checked && disabledColor) ||
-            (checked ? lightThemeBackgroundColor : primaryColor),
-        toggleBackgroundColorHover: checked ? lightThemeBackgroundColor : primaryColor,
+            (checked
+                ? isHighContrastMode
+                    ? canvasColor
+                    : lightThemeBackgroundColor
+                : isHighContrastMode
+                    ? canvasTextColor
+                    : primaryColor),
+        toggleBackgroundColorHover: checked
+            ? lightThemeBackgroundColor
+            : isHighContrastMode
+                ? canvasTextColor
+                : primaryColor,
         textColor: disabledOrLoadingColor || primaryColor,
     };
 };
@@ -5843,7 +5977,7 @@ const getComponentCss$k = (alignLabel, hideLabel, stretch, checked, disabled, lo
         },
     })), { label: Object.assign(Object.assign(Object.assign({}, textSmallStyle), { paddingTop: '2px', minWidth: 0, minHeight: 0, color: textColor }), mergeDeep(buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
             order: alignLabelValue === 'left' ? -1 : 0,
-        })), buildResponsiveStyles(hideLabel, getTextHiddenJssStyle))) }));
+        })), buildResponsiveStyles(hideLabel, getHiddenTextJssStyle))) }));
 };
 
 const getComponentCss$j = () => {
@@ -5875,11 +6009,12 @@ const getComponentCss$h = (theme) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign(Object.assign(Object.assign({ display: 'block' }, textSmallStyle), { color: primaryColor, textAlign: 'left' }), hostHiddenStyles)),
-            '::slotted(*)': addImportantToEachRule({
-                [cssVariableTableHoverColor]: hoverColor,
-                [cssVariableTableBorderColor]: contrastLowColor,
-                [cssVariableTableHeadCellIconFilter]: isThemeDark(theme) ? 'invert(100%)' : 'none',
-            }),
+            '::slotted(*)': addImportantToEachRule(Object.assign({ [cssVariableTableHoverColor]: hoverColor, [cssVariableTableBorderColor]: contrastLowColor, [cssVariableTableHeadCellIconFilter]: isThemeDark(theme) ? 'invert(100%)' : 'none' }, (isHighContrastMode &&
+                getSchemedHighContrastMediaQuery({
+                    [cssVariableTableHeadCellIconFilter]: 'none',
+                }, {
+                    [cssVariableTableHeadCellIconFilter]: 'invert(100%)',
+                })))),
         },
         caption: {
             marginBottom: spacingFluidMedium,
@@ -5924,7 +6059,7 @@ const getComponentCss$g = (active, direction, hideLabel, multiline) => {
                     } }),
             }
             : hideLabel && {
-                span: Object.assign(Object.assign({}, getTextHiddenJssStyle(true)), { display: 'block', border: 0 }),
+                span: Object.assign(Object.assign({}, getHiddenTextJssStyle()), { display: 'block', border: 0 }),
             })) }, (sortable && {
         icon: {
             transition: getTransition('opacity'),
@@ -5994,10 +6129,10 @@ const getComponentCss$c = (size, weight, theme) => {
             display: 'block',
             position: 'absolute',
             width: 0,
-            height: weight === 'semi-bold' ? '2px' : '1.5px',
+            height: '2px',
             left: 0,
-            bottom: '-4px',
-            background: primaryColor,
+            bottom: isHighContrastMode ? '0' : '-2px',
+            background: isHighContrastMode ? getHighContrastColors().canvasTextColor : primaryColor,
             '&--enable-transition': {
                 willChange: 'width',
                 transition: `transform ${tabsTransitionDuration},width ${tabsTransitionDuration}`,
@@ -6058,7 +6193,7 @@ const getComponentCss$9 = (color, hasLabel, theme) => {
     const backgroundColor = getThemedBackgroundColor(color, themedColors);
     return getCss(Object.assign(Object.assign({ '@global': {
             ':host': addImportantToEachRule(Object.assign({ display: 'inline-block', verticalAlign: 'top', outline: 0 }, hostHiddenStyles)),
-            button: Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', position: 'relative', alignItems: 'center', gap: '12px', minHeight: '54px', padding: '4px 0 4px 12px', borderRadius: borderRadiusSmall, border: 0, cursor: 'pointer', background: backgroundColor, color: primaryColor, textAlign: 'left' }, textSmallStyle), { outline: 0 }), getTagFocusJssStyle(themedColors)), hoverMediaQuery({
+            button: Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', position: 'relative', alignItems: 'center', gap: '12px', minHeight: '54px', padding: '4px 0 4px 12px', borderRadius: borderRadiusSmall, border: 0, cursor: 'pointer', background: backgroundColor, color: primaryColor, textAlign: 'left' }, textSmallStyle), { outline: isHighContrastMode ? '1px solid transparent' : 0 }), getTagFocusJssStyle(themedColors)), hoverMediaQuery({
                 '&:hover > .icon': {
                     backgroundColor: hoverColor,
                 },
@@ -6075,7 +6210,7 @@ const getComponentCss$9 = (color, hasLabel, theme) => {
             marginRight: '10px',
             transition: getTransition('background-color'),
             borderRadius: borderRadiusSmall,
-        }, 'sr-only': getScreenReaderOnlyJssStyle() }));
+        }, 'sr-only': getHiddenTextJssStyle() }));
 };
 
 const getThemedBackgroundHoverColor = (tagColor, themedColors, theme) => {
@@ -6108,7 +6243,9 @@ const getComponentCss$8 = (tagColor, isFocusable, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'inline-flex', verticalAlign: 'top' }, addImportantToEachRule(hostHiddenStyles)),
-            span: Object.assign({ display: 'flex', gap: '2px', alignItems: 'center', position: 'relative', padding: '4px 9px', borderRadius: borderRadiusSmall, background: backgroundColor, color: primaryColor, font: textXSmallStyle.font, whiteSpace: 'nowrap' }, (isFocusable &&
+            span: Object.assign(Object.assign({ display: 'flex', gap: '2px', alignItems: 'center', position: 'relative', padding: '4px 9px', borderRadius: borderRadiusSmall, background: backgroundColor, color: primaryColor, font: textXSmallStyle.font, whiteSpace: 'nowrap' }, (isHighContrastMode && {
+                outline: '1px solid transparent',
+            })), (isFocusable &&
                 hoverMediaQuery({
                     transition: getTransition('background-color'),
                     '&:hover': {
@@ -6201,7 +6338,7 @@ const getComponentCss$7 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter
         },
     })), getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state)), { 
         // TODO: could be made conditional if we had hasUnit
-        'sr-only': Object.assign(Object.assign({}, getScreenReaderOnlyJssStyle()), { padding: 0 }) }));
+        'sr-only': Object.assign(Object.assign({}, getHiddenTextJssStyle()), { padding: 0 }) }));
 };
 
 /** @deprecated */
@@ -6298,7 +6435,7 @@ const getComponentCss$3 = (isDisabled, hideLabel, state, hasCounter, theme) => {
             color: contrastMediumColor,
         },
     })), getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state)), (hasCounter && {
-        'sr-only': Object.assign(Object.assign({}, getScreenReaderOnlyJssStyle()), { padding: 0 }),
+        'sr-only': Object.assign(Object.assign({}, getHiddenTextJssStyle()), { padding: 0 }),
     })));
 };
 
@@ -6352,15 +6489,19 @@ const getComponentCss$1 = () => {
 const getComponentCss = (size, theme) => {
     return getCss({
         '@global': {
-            ':host': Object.assign({ position: 'relative', display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(Object.assign(Object.assign({ outline: 0, boxSizing: 'content-box' }, (!(size === 'inherit') && { height: 'clamp(0.63rem, 0.42vw + 0.5rem, 1rem)' })), hostHiddenStyles))),
-            a: Object.assign({ display: 'block', textDecoration: 'none', height: 'inherit' }, focusPseudoJssStyle),
-            svg: {
+            ':host': Object.assign({ position: 'relative', display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(Object.assign(Object.assign({ outline: 0, maxWidth: '100%', maxHeight: '100%', boxSizing: 'content-box' }, (!(size === 'inherit') && { height: 'clamp(0.63rem, 0.42vw + 0.5rem, 1rem)' })), hostHiddenStyles))),
+            'a, svg': {
                 display: 'block',
+                maxWidth: '100%',
+                maxHeight: '100%',
                 height: 'inherit',
-                fill: getThemedColors(theme).primaryColor,
+            },
+            a: Object.assign({ textDecoration: 'none' }, focusPseudoJssStyle),
+            svg: {
+                fill: isHighContrastMode ? getHighContrastColors().canvasTextColor : getThemedColors(theme).primaryColor,
             },
         },
     });
 };
 
-export { getComponentCss$Y as getAccordionCss, getComponentCss$X as getBannerCss, getComponentCss$T as getButtonCss, getComponentCss$W as getButtonGroupCss, getComponentCss$V as getButtonPureCss, getComponentCss$U as getButtonTileCss, getComponentCss$S as getCarouselCss, getComponentCss$R as getCheckboxWrapperCss, getComponentCss$Q as getContentWrapperCss, getComponentCss$P as getCrestCss, getComponentCss$O as getDisplayCss, getComponentCss$N as getDividerCss, getComponentCss$L as getFieldsetCss, getComponentCss$M as getFieldsetWrapperCss, getComponentCss$J as getFlexCss, getComponentCss$K as getFlexItemCss, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$H as getGridCss, getComponentCss$I as getGridItemCss, getComponentCss$G as getHeadingCss, getComponentCss$F as getHeadlineCss, getComponentCss$E as getIconCss, getComponentCss$D as getInlineNotificationCss, getComponentCss$B as getLinkCss, getComponentCss$C as getLinkPureCss, getComponentCss$B as getLinkSocialCss, getComponentCss$z as getLinkTileCss, getComponentCss$A as getLinkTileModelSignatureCss, getComponentCss$y as getMarqueCss, getComponentCss$x as getModalCss, getComponentCss$w as getModelSignatureCss, getComponentCss$v as getPaginationCss, getComponentCss$u as getPopoverCss, getComponentCss$t as getRadioButtonWrapperCss, getComponentCss$s as getScrollerCss, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$p as getSelectWrapperCss, getComponentCss$n as getSpinnerCss, getComponentCss$l as getStepperHorizontalCss, getComponentCss$m as getStepperHorizontalItemCss, getComponentCss$k as getSwitchCss, getComponentCss$j as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$g as getTableHeadCellCss, getComponentCss$e as getTableHeadCss, getComponentCss$f as getTableHeadRowCss, getComponentCss$d as getTableRowCss, getComponentCss$c as getTabsBarCss, getComponentCss$a as getTabsCss, getComponentCss$b as getTabsItemCss, getComponentCss$8 as getTagCss, getComponentCss$9 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$7 as getTextFieldWrapperCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
+export { getComponentCss$Y as getAccordionCss, getComponentCss$X as getBannerCss, getComponentCss$T as getButtonCss, getComponentCss$W as getButtonGroupCss, getComponentCss$V as getButtonPureCss, getComponentCss$U as getButtonTileCss, getComponentCss$S as getCarouselCss, getComponentCss$R as getCheckboxWrapperCss, getComponentCss$Q as getContentWrapperCss, getComponentCss$P as getCrestCss, getComponentCss$O as getDisplayCss, getComponentCss$N as getDividerCss, getComponentCss$L as getFieldsetCss, getComponentCss$M as getFieldsetWrapperCss, getComponentCss$J as getFlexCss, getComponentCss$K as getFlexItemCss, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$H as getGridCss, getComponentCss$I as getGridItemCss, getComponentCss$G as getHeadingCss, getComponentCss$F as getHeadlineCss, getComponentCss$E as getIconCss, getComponentCss$D as getInlineNotificationCss, getComponentCss$B as getLinkCss, getComponentCss$C as getLinkPureCss, getComponentCss$B as getLinkSocialCss, getComponentCss$z as getLinkTileCss, getComponentCss$A as getLinkTileModelSignatureCss, getComponentCss$y as getMarqueCss, getComponentCss$x as getModalCss, getComponentCss$w as getModelSignatureCss, getComponentCss$v as getPaginationCss, getComponentCss$u as getPopoverCss, getComponentCss$t as getRadioButtonWrapperCss, getComponentCss$s as getScrollerCss, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$p as getSelectWrapperCss, getComponentCss$o as getSelectWrapperDropdownCss, getComponentCss$n as getSpinnerCss, getComponentCss$l as getStepperHorizontalCss, getComponentCss$m as getStepperHorizontalItemCss, getComponentCss$k as getSwitchCss, getComponentCss$j as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$g as getTableHeadCellCss, getComponentCss$e as getTableHeadCss, getComponentCss$f as getTableHeadRowCss, getComponentCss$d as getTableRowCss, getComponentCss$c as getTabsBarCss, getComponentCss$a as getTabsCss, getComponentCss$b as getTabsItemCss, getComponentCss$8 as getTagCss, getComponentCss$9 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$7 as getTextFieldWrapperCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };