@porsche-design-system/components-react 3.0.0-alpha.6 → 3.0.0-rc.1

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

@@ -6,6 +6,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) => {
@@ -41,6 +43,8 @@ const borderRadiusSmall = '4px';
 
 const borderRadiusMedium = '8px';
 
+const borderRadiusLarge = '12px';
+
 const borderWidthBase = '2px';
 
 const _dropShadowBackgroundColor = 'rgba(0, 0, 0, 0.16)';
@@ -107,12 +111,6 @@ const fontWeightSemiBold = 600;
 
 const fontWeightBold = 700;
 
-const fontWeight = {
-    regular: fontWeightRegular,
-    semiBold: fontWeightSemiBold,
-    bold: fontWeightBold,
-};
-
 const fontStyleNormal = 'normal';
 
 const fontVariant = 'normal';
@@ -520,25 +518,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";
 
@@ -645,9 +624,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;
 }
@@ -848,9 +825,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;
   };
@@ -1096,7 +1071,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;
@@ -1155,8 +1129,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;
     });
   }
@@ -1981,8 +1953,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;
         }
       }
 
@@ -2124,8 +2094,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.
@@ -2142,10 +2110,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 = '';
 
@@ -2241,7 +2205,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;
   }
 };
 /**
@@ -2355,10 +2318,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;
@@ -2381,7 +2340,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;
   }
 
@@ -2406,7 +2365,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;
   }
 
@@ -2827,8 +2785,6 @@ function () {
       entry.refs++;
       return entry.sheet;
     }
-
-    warning(false, "[JSS] SheetsManager: can't find sheet to manage");
     return undefined;
   };
 
@@ -2840,8 +2796,6 @@ function () {
         entry.refs--;
         if (entry.refs === 0) entry.sheet.detach();
       }
-    } else {
-      warning(false, "SheetsManager: can't find sheet to unmanage");
     }
   };
 
@@ -3183,8 +3137,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;
     };
   }
@@ -3779,8 +3731,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');
@@ -3878,6 +3843,13 @@ 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: [
@@ -3955,14 +3927,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
                     ? {
@@ -3985,41 +3957,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;
@@ -4210,7 +4178,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({
@@ -4226,7 +4194,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)',
             },
@@ -4273,6 +4241,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,
@@ -4285,7 +4254,7 @@ const getVariantColors = (variant, theme) => {
             textColor: primaryColor,
             borderColor: primaryColor,
             borderColorHover: contrastMediumColor,
-            backgroundColor: 'transparent',
+            backgroundColor: isHighContrastMode ? canvasColor : 'transparent',
             backgroundColorHover: hoverColor,
         },
     };
@@ -4309,7 +4278,7 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
             },
         })), (!isDisabledOrLoading &&
             hoverMediaQuery({
-                '&:hover': Object.assign({ backgroundColor: backgroundColorHover, borderColor: borderColorHover }, (!isPrimary && frostedGlassStyle)),
+                '&:hover': Object.assign({ backgroundColor: backgroundColorHover, borderColor: isHighContrastMode ? focusColor : borderColorHover }, (!isPrimary && frostedGlassStyle)),
             }))), label: Object.assign({}, buildResponsiveStyles(hideLabel, (hideLabelValue) => hideLabelValue
             ? {
                 width: 0,
@@ -4330,16 +4299,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];
@@ -4385,6 +4355,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)),
@@ -4448,14 +4419,14 @@ const getComponentCss$S = (width, hasPagination, alignHeader, theme) => {
         }))), { 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',
         },
     })));
@@ -4483,12 +4454,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' })),
@@ -4505,56 +4482,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, getFormCheckboxRadioHiddenJssStyle)) }, 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 = {
@@ -4583,19 +4581,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',
             },
         },
@@ -4661,7 +4673,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' })),
         },
     });
 };
@@ -4912,10 +4924,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 : keyFramesLight} 1ms` }))), (isSizeInherit
                 ? {
                     width: size,
                     height: size,
@@ -4944,20 +4958,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]: {
@@ -5021,8 +5029,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,
@@ -5040,8 +5052,7 @@ const getComponentCss$B = (icon, iconSource, variant, hideLabel, hasSlottedAncho
                     border: 0,
                 },
             },
-        }),
-    }))));
+        }) })))));
 };
 
 const LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS = ['h2', 'h3', 'h4', 'h5', 'h6'];
@@ -5178,7 +5189,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,
@@ -5200,6 +5211,8 @@ const getComponentCss$x = (isOpen, isFullscreen, hasDismissButton, hasHeader) =>
     })));
 };
 
+const modelSignatureHeight = 36;
+
 const colorToFilterMap = {
     light: {
         primary: filterLightPrimary,
@@ -5219,8 +5232,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 })),
         },
     });
 };
@@ -5280,7 +5303,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%',
@@ -5305,8 +5328,6 @@ const directionPositionMap = {
 };
 const borderWidth = '12px';
 const transparentColor = 'transparent';
-const canvas = 'canvas';
-const canvasText = 'canvastext';
 const join = (...arr) => arr.join(' ');
 const directionArrowMap = {
     top: {
@@ -5314,40 +5335,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) => {
@@ -5385,9 +5402,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,
@@ -5400,8 +5417,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%',
@@ -5519,10 +5538,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,
     };
 };
@@ -5655,6 +5675,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)),
@@ -5667,13 +5688,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',
@@ -5781,17 +5802,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,
     };
 };
@@ -5877,11 +5909,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,
@@ -5996,10 +6029,10 @@ const getComponentCss$c = (size, weight, theme) => {
             display: 'block',
             position: 'absolute',
             width: 0,
-            height: weight === 'semi-bold' ? '2px' : '1.5px',
+            height: isHighContrastMode ? '4px' : weight === 'semi-bold' ? '2px' : '1.5px',
             left: 0,
-            bottom: '-4px',
-            background: primaryColor,
+            bottom: isHighContrastMode ? '-1px' : '-4px',
+            background: isHighContrastMode ? getHighContrastColors().canvasTextColor : primaryColor,
             '&--enable-transition': {
                 willChange: 'width',
                 transition: `transform ${tabsTransitionDuration},width ${tabsTransitionDuration}`,
@@ -6060,7 +6093,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,
                 },
@@ -6110,7 +6143,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': {
@@ -6354,12 +6389,16 @@ 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,
             },
         },
     });