@porsche-design-system/components-react 3.11.0 → 3.12.0-rc.0

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

@@ -3208,29 +3208,6 @@ const dropShadowHighStyle = {
     boxShadow: `0px 8px 40px ${_dropShadowBackgroundColor}`, // filter: drop-shadow() causes visual glitches in Firefox in combination with frostedGlassStyle
 };
 
-const themeLightStateFocus = '#1A44EA';
-
-const getFocusStyle = (opts) => {
-    const { borderRadius = 'small', offset = '2px' } = opts || {};
-    const outlineOffset = offset === 'small' ? '2px' : offset === 'none' ? 0 : offset || '2px';
-    const borderRadiusValue = borderRadius === 'small'
-        ? borderRadiusSmall
-        : borderRadius === 'medium'
-            ? borderRadiusMedium
-            : borderRadius || borderRadiusSmall;
-    return {
-        borderRadius: borderRadiusValue, // it's visually being reflected on both (when placed here), element and focus outline
-        '&:focus': {
-            outline: `${borderWidthBase} solid ${themeLightStateFocus}`,
-            outlineOffset,
-        },
-        // why? have a look at this article https://www.tpgi.com/focus-visible-and-backwards-compatibility/
-        '&:focus:not(:focus-visible)': {
-            outlineColor: 'transparent',
-        },
-    };
-};
-
 const fontFamily = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
 
 const fontHyphenationStyle = {
@@ -3825,8 +3802,9 @@ const motionEasingMap = {
 };
 const cssVariableTransitionDuration = '--p-transition-duration';
 const cssVariableAnimationDuration = '--p-animation-duration';
-const getTransition = (cssProperty, duration = 'short', easing = 'base', delay) => `${cssProperty} var(${cssVariableTransitionDuration}, ${motionDurationMap[duration]}) ${motionEasingMap[easing]}${delay ? ` var(${cssVariableTransitionDuration}, ${motionDurationMap[delay]})` : ''}`;
-const pxToRemWithUnit = (px) => `${px / 16}rem`;
+const getTransition = (cssProperty, duration = 'short', easing = 'base', delay) => {
+    return `${cssProperty} var(${cssVariableTransitionDuration}, ${motionDurationMap[duration]}) ${motionEasingMap[easing]}${delay ? ` var(${cssVariableTransitionDuration}, ${motionDurationMap[delay]})` : ''}`;
+};
 const addImportantToRule = (value) => `${value} !important`;
 const addImportantToEachRule = (input) => {
     return Object.entries(input).reduce((result, [key, value]) => value === null
@@ -3840,13 +3818,25 @@ const addImportantToEachRule = (input) => {
 const doGetThemedColors = (theme = 'light') => {
     return getThemedColors(theme);
 };
-const getInsetJssStyle = (value = 0) => {
-    value = value === 0 || value === 'auto' ? value : `${value}px`;
+const getFocusJssStyle = (theme, opts) => {
+    const { offset = '2px', slotted = '', pseudo = false } = opts || {};
+    const { focusColor } = getThemedColors(theme);
+    const { focusColor: focusColorDark } = getThemedColors('dark');
+    const slottedSelector = slotted && slotted !== true ? slotted : '';
     return {
-        top: value,
-        left: value,
-        right: value,
-        bottom: value,
+        [`&${slotted ? '(' : ''}${slottedSelector}::-moz-focus-inner${slotted ? ')' : ''}`]: {
+            border: 0, // reset ua-style (for FF)
+        },
+        [`&${slotted ? '(' : ''}${slottedSelector}:focus${slotted ? ')' : ''}`]: {
+            outline: 0, // reset ua-style (for older browsers)
+        },
+        [`&${slotted ? '(' : ''}${slottedSelector}:focus-visible${slotted ? ')' : ''}${pseudo ? '::before' : ''}`]: {
+            outline: `${borderWidthBase} solid ${focusColor}`,
+            outlineOffset: offset,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                outlineColor: focusColorDark,
+            }),
+        },
     };
 };
 // reset initial styles, e.g. in case link-pure is used with slotted anchor and nested within e.g. an accordion
@@ -3857,55 +3847,38 @@ const getResetInitialStylesForSlottedAnchor = {
     borderRadius: 0,
     background: 'transparent',
 };
-const focusPseudoJssStyle = {
-    outline: 0,
-    '&::before': {
-        // needs to be defined always to have correct custom click area
-        content: '""',
-        position: 'absolute',
-        ...getInsetJssStyle(),
-    },
-    '&:focus::before': {
-        borderRadius: '1px', // TODO: why just 1px border-radius?
-        outline: `${borderWidthBase} solid ${themeLightStateFocus}`,
-        outlineOffset: '2px',
-    },
-    '&:focus:not(:focus-visible)::before': {
-        outline: 0,
-    },
-};
 /**
  * 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 getHiddenTextJssStyle = (isHidden = true, isShownJssStyle) => isHidden
-    ? {
-        position: 'absolute',
-        width: '1px',
-        height: '1px',
-        padding: 0,
-        margin: '-1px',
-        overflow: 'hidden',
-        clip: 'rect(0,0,0,0)',
-        whiteSpace: 'nowrap',
-    }
-    : {
-        position: 'static',
-        width: 'auto',
-        height: 'auto',
-        padding: 0,
-        margin: 0,
-        overflow: 'visible',
-        clip: 'auto',
-        whiteSpace: 'normal',
-        ...isShownJssStyle,
-    };
-const getBackfaceVisibilityJssStyle = () => ({
-    backfaceVisibility: 'hidden',
-    WebkitBackfaceVisibility: 'hidden',
-});
+const getHiddenTextJssStyle = (isHidden = true, isShownJssStyle) => {
+    return isHidden
+        ? {
+            position: 'absolute',
+            width: '1px',
+            height: '1px',
+            padding: 0,
+            margin: '-1px',
+            overflow: 'hidden',
+            clip: 'rect(0,0,0,0)',
+            whiteSpace: 'nowrap',
+        }
+        : {
+            position: 'static',
+            width: 'auto',
+            height: 'auto',
+            padding: 0,
+            margin: 0,
+            overflow: 'visible',
+            clip: 'auto',
+            whiteSpace: 'normal',
+            ...isShownJssStyle,
+        };
+};
+// TODO: there should be a shared style util for modal, flyout and flyout-navigation instead of having this code in the
+//  main bundle. Or don't share it at all, in case same transition concept isn't ideal to be shared from an UI point of view.
 /**
  * Generates JSS styles for a frosted glass background.
  * @param {boolean} isVisible - Determines if the frosted glass effect is visible.
@@ -3917,7 +3890,7 @@ const getBackfaceVisibilityJssStyle = () => ({
 const getBackdropJssStyle = (isVisible, zIndex, theme, duration = 'long') => {
     return {
         position: 'fixed',
-        ...getInsetJssStyle(),
+        inset: 0,
         zIndex,
         // TODO: background shading is missing in getThemedColors(theme).backgroundShading
         background: isThemeDark(theme) ? themeDarkBackgroundShading : themeLightBackgroundShading,
@@ -4090,8 +4063,8 @@ const formatObjectOutput = (value) => {
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
 const getComponentCss$13 = (size, compact, open, theme) => {
-    const { primaryColor, hoverColor, focusColor, contrastLowColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, focusColor: focusColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
+    const { primaryColor, hoverColor, contrastLowColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
     return getCss({
         '@global': {
             ':host': {
@@ -4118,7 +4091,6 @@ const getComponentCss$13 = (size, compact, open, theme) => {
                 width: '100%',
                 textDecoration: 'none',
                 border: 0,
-                outline: 0,
                 margin: 0, // Removes default button margin on safari 15
                 gap: '24px',
                 background: 'transparent',
@@ -4163,15 +4135,7 @@ const getComponentCss$13 = (size, compact, open, theme) => {
                         }),
                     },
                 })),
-                '&:focus::before': {
-                    border: `${borderWidthBase} solid ${focusColor}`,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: focusColorDark,
-                    }),
-                },
-                '&:not(:focus-visible)::before': {
-                    border: 0,
-                },
+                ...getFocusJssStyle(theme, { pseudo: true, offset: '-2px' }),
             },
         },
         heading: {
@@ -4330,18 +4294,19 @@ const getFontSizeText = (size) => {
     return fontSizeTextMap[size];
 };
 
+// TODO: why not using getHiddenTextJssStyle()?
 // Needed for slotted anchor and hidden label, which then enlarges the hidden label to equal host size and indents the text to be visually hidden.
 const getVisibilityJssStyle = (hideLabel) => {
     return hideLabel
         ? {
             position: 'absolute',
-            ...getInsetJssStyle(),
+            inset: 0,
             whiteSpace: 'nowrap',
-            textIndent: '-999999px',
+            textIndent: '-999999px', // TODO: check if text-indent still works for RTL-mode in this case
         }
         : {
             position: 'relative',
-            ...getInsetJssStyle('auto'),
+            inset: 'auto',
             whiteSpace: 'inherit',
             textIndent: 0,
             zIndex: 1, // fix Firefox bug on :hover (#2583)
@@ -4350,8 +4315,8 @@ const getVisibilityJssStyle = (hideLabel) => {
 const offsetVertical = '-2px';
 const offsetHorizontal = '-4px';
 const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme) => {
-    const { primaryColor, disabledColor, hoverColor, focusColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, hoverColor: hoverColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
+    const { primaryColor, disabledColor, hoverColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return {
         '@global': {
@@ -4379,7 +4344,6 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 color: isDisabledOrLoading ? disabledColorDark : primaryColorDark,
             }),
-            outline: 0,
             ...textSmallStyle,
             ...mergeDeep(buildResponsiveStyles(stretch, (stretchValue) => ({
                 justifyContent: stretchValue ? 'space-between' : 'flex-start',
@@ -4416,19 +4380,10 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
                         }),
                     },
                 })),
-            ...(!hasSlottedAnchor && {
-                '&:focus::before': {
-                    border: `${borderWidthBase} solid ${focusColor}`,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: focusColorDark,
-                    }),
-                },
-                '&:not(:focus-visible)::before': {
-                    border: 0,
-                },
-            }),
+            ...(!hasSlottedAnchor && getFocusJssStyle(theme, { pseudo: true, offset: '-2px' })),
         },
         label: {
+            transition: getTransition('opacity'),
             position: 'relative', // needed for hover state when icon="none" is set
         },
         ...(hasIcon && {
@@ -4452,6 +4407,12 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
     };
 };
 
+const getFunctionalComponentLoadingMessageStyles = () => {
+    return {
+        loading: getHiddenTextJssStyle(),
+    };
+};
+
 const getComponentCss$10 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, false, theme), {
@@ -4466,7 +4427,7 @@ const getComponentCss$10 = (icon, iconSource, active, isLoading, isDisabledOrLoa
         ...(!hasIcon &&
             isLoading && {
             label: {
-                visibility: 'hidden',
+                opacity: 0, // use opacity for smooth transition between states and to keep accessible name available
             },
             icon: {
                 position: 'absolute',
@@ -4476,6 +4437,8 @@ const getComponentCss$10 = (icon, iconSource, active, isLoading, isDisabledOrLoa
                 height: fontLineHeight,
             },
         }),
+        // .loading
+        ...getFunctionalComponentLoadingMessageStyles(),
     }));
 };
 
@@ -4528,7 +4491,7 @@ const getTileBaseStyles = (aspectRatio, isDisabled) => {
                 '::slotted': {
                     '&(picture)': {
                         position: 'absolute',
-                        ...getInsetJssStyle(),
+                        inset: 0,
                     },
                     '&(img)': {
                         height: '100%',
@@ -4556,8 +4519,8 @@ const getTileBaseStyles = (aspectRatio, isDisabled) => {
         },
         'image-container': {
             position: 'absolute',
+            inset: 0,
             transition: getTransition('transform', 'moderate'),
-            ...getInsetJssStyle(),
         },
         content: {
             position: 'absolute',
@@ -4584,7 +4547,7 @@ background, align, compact, hasGradient, isDisabled) => {
     return mergeDeep(getTileBaseStyles(aspectRatio, isDisabled), {
         '@global': {
             p: {
-                maxWidth: pxToRemWithUnit(550), // in this case rem unit makes sense to scale up available space
+                maxWidth: '34.375rem', // in this case rem unit makes sense to scale up available space
                 margin: 0,
                 ...textLargeStyle,
                 hyphens: 'inherit',
@@ -4688,7 +4651,6 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
             minWidth: '54px', // ensure space is already reserved until icon component is loaded (ssr)
             minHeight: '54px', // ensure space is already reserved until icon component is loaded (ssr)
             boxSizing: 'border-box',
-            outline: 0,
             textAlign: 'start',
             WebkitAppearance: 'none', // iOS safari
             appearance: 'none',
@@ -4704,18 +4666,7 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
                 padding: hideLabelValue ? '13px' : '13px 26px',
                 gap: hideLabelValue ? 0 : spacingStaticSmall,
             })),
-            ...(!hasSlottedAnchor && {
-                '&:focus::before': {
-                    content: '""',
-                    position: 'fixed',
-                    border: `${borderWidthBase} solid ${focusColor}`,
-                    borderRadius: borderRadiusMedium,
-                    ...getInsetJssStyle(-6),
-                },
-                '&:not(:focus-visible)::before': {
-                    border: 0,
-                },
-            }),
+            ...(!hasSlottedAnchor && getFocusJssStyle(theme)),
             ...(!isDisabledOrLoading &&
                 hoverMediaQuery({
                     '&:hover': {
@@ -4814,6 +4765,8 @@ const getComponentCss$_ = (icon, iconSource, variant, hideLabel, disabled, loadi
                 opacity: 0, // use opacity for smooth transition between states
             }),
         },
+        // .loading
+        ...getFunctionalComponentLoadingMessageStyles(),
     }));
 };
 
@@ -4841,9 +4794,13 @@ const spacingMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
+const backfaceVisibilityJssStyle = {
+    backfaceVisibility: 'hidden',
+    WebkitBackfaceVisibility: 'hidden',
+};
 const getComponentCss$Z = (hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme) => {
-    const { primaryColor, contrastMediumColor, focusColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
+    const { primaryColor, contrastMediumColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
     const { canvasTextColor } = getHighContrastColors();
     const isHeaderAlignCenter = alignHeader === 'center';
     return getCss({
@@ -4867,15 +4824,11 @@ const getComponentCss$Z = (hasHeading, hasDescription, hasControlsSlot, headingS
                 },
             }),
             ...addImportantToEachRule({
-                '::slotted(*)': {
-                    borderRadius: `var(--p-carousel-border-radius, ${borderRadiusLarge})`,
-                },
-                '::slotted(*:focus-visible)': {
-                    outline: `${borderWidthBase} solid ${focusColor}`,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        outlineColor: focusColorDark,
-                    }),
-                    outlineOffset: '2px',
+                '::slotted': {
+                    '&(*)': {
+                        borderRadius: `var(--p-carousel-border-radius, ${borderRadiusLarge})`,
+                    },
+                    ...getFocusJssStyle(theme, { slotted: true }),
                 },
                 // TODO: maybe it's better to style with slot[name="heading"] and slot[name="description"] instead, then styles would be part of shadow dom
                 // h2,::slotted([slot=heading]),p,::slotted([slot=description])
@@ -4939,7 +4892,7 @@ const getComponentCss$Z = (hasHeading, hasDescription, hasControlsSlot, headingS
         'skip-link': {
             opacity: 0,
             pointerEvents: 'none',
-            '&:focus': {
+            '&:focus-visible': {
                 opacity: 1,
                 pointerEvents: 'all',
             },
@@ -4970,12 +4923,12 @@ const getComponentCss$Z = (hasHeading, hasDescription, hasControlsSlot, headingS
                 },
             },
             '&__list': {
+                ...backfaceVisibilityJssStyle,
                 display: 'flex',
-                ...getBackfaceVisibilityJssStyle(),
             },
             '&__slide': {
+                ...backfaceVisibilityJssStyle,
                 flexShrink: 0,
-                ...getBackfaceVisibilityJssStyle(),
                 transform: 'translateZ(0)', // fixes mobile safari flickering, https://github.com/nolimits4web/swiper/issues/3527#issuecomment-609088939
             },
             '&__sr': getHiddenTextJssStyle(), // appears in the DOM when sliding
@@ -5104,8 +5057,8 @@ const getThemedFormStateColors = (theme, state) => {
 
 // TODO: move to form-styles.ts
 const getSlottedCheckboxRadioButtonStyles = (state, isDisabled, isLoading, theme) => {
-    const { primaryColor, contrastMediumColor, contrastHighColor, disabledColor, focusColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
+    const { primaryColor, contrastMediumColor, contrastHighColor, disabledColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
     const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
     const { canvasTextColor } = getHighContrastColors();
@@ -5130,7 +5083,6 @@ const getSlottedCheckboxRadioButtonStyles = (state, isDisabled, isLoading, theme
     return {
         '::slotted': {
             '&(input)': {
-                position: 'relative', // TODO: can be removed as soon as focus style was adjusted
                 width: fontLineHeight,
                 height: fontLineHeight,
                 font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
@@ -5142,8 +5094,8 @@ const getSlottedCheckboxRadioButtonStyles = (state, isDisabled, isLoading, theme
                 boxSizing: 'content-box',
                 background: `transparent 0% 0% / ${fontLineHeight}`,
                 transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
-                border: `2px solid ${uncheckedColor}`,
-                outline: 0,
+                border: `${borderWidthBase} solid ${uncheckedColor}`,
+                outline: 0, // TODO: only relevant for VRT testing with forced states - prevents :focus style (in case getFocusJssStyle() condition is not matching)
                 ...(disabledOrLoading
                     ? {
                         pointerEvents: 'none', // to prevent form element becomes clickable/toggleable
@@ -5185,21 +5137,7 @@ const getSlottedCheckboxRadioButtonStyles = (state, isDisabled, isLoading, theme
                         transition: 'unset', // Fixes chrome bug where transition properties are stuck on hover
                     }),
                 })),
-            ...(!isDisabled && {
-                // TODO: can be done with getFocusStyle() in the meantime
-                '&(input:focus)::before': {
-                    content: '""',
-                    position: 'absolute',
-                    ...getInsetJssStyle(-6),
-                    border: `${borderWidthBase} solid ${focusColor}`,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: focusColorDark,
-                    }),
-                },
-                '&(input:focus:not(:focus-visible))::before': {
-                    borderColor: 'transparent',
-                },
-            }),
+            ...(!isDisabled && getFocusJssStyle(theme, { slotted: 'input' })),
         },
     };
 };
@@ -5322,11 +5260,6 @@ const getComponentCss$Y = (hideLabel, state, isDisabled, isLoading, theme) => {
                             }),
                         },
                     }),
-                    ...(!isDisabled && {
-                        '&(input:focus)::before': {
-                            borderRadius: borderRadiusMedium,
-                        },
-                    }),
                 },
             })),
         },
@@ -5367,6 +5300,8 @@ const getComponentCss$Y = (hideLabel, state, isDisabled, isLoading, theme) => {
         ...getFunctionalComponentStateMessageStyles(theme, state, {
             gridColumn: '1/3',
         }),
+        // .loading
+        ...getFunctionalComponentLoadingMessageStyles(),
     });
 };
 
@@ -5425,7 +5360,7 @@ const getComponentCss$W = () => {
                 display: 'inline-block',
                 verticalAlign: 'top',
                 ...addImportantToEachRule({
-                    outline: 0,
+                    outline: 0, // TODO: is it still necessary?
                     boxSizing: 'content-box', // needed for correct height calculation when padding is set on host (e.g. custom click area)
                     ...getDimensionStyle,
                     ...colorSchemeStyles,
@@ -5436,7 +5371,14 @@ const getComponentCss$W = () => {
                 display: 'block',
                 textDecoration: 'none',
                 ...getDimensionStyle,
-                ...focusPseudoJssStyle,
+                '&::before': {
+                    // needs to be defined always to have correct custom click area
+                    content: '""',
+                    position: 'absolute',
+                    inset: 0,
+                    borderRadius: '1px',
+                },
+                ...getFocusJssStyle('light', { pseudo: true }), // TODO: we need to support theme
             },
             picture: {
                 display: 'block',
@@ -5722,7 +5664,7 @@ const getComponentCss$P = (isPrimaryScrollerVisible, isSecondaryScrollerVisible,
             },
             dialog: {
                 position: 'fixed',
-                ...getInsetJssStyle(),
+                inset: 0,
                 display: 'grid', // ua-style reset
                 width: 'auto', // ua-style reset and to ensure transition duration works correctly
                 height: '100vh', // ua-style reset
@@ -5734,6 +5676,7 @@ const getComponentCss$P = (isPrimaryScrollerVisible, isSecondaryScrollerVisible,
                 visibility: 'inherit', // ua-style reset
                 background: 'none', // ua-style reset
                 overflow: 'hidden', // ua-style reset, dialog shall never become scrollable, it's handled by custom scroll areas
+                outline: 0, // ua-style reset
                 ...(isPrimaryScrollerVisible
                     ? {
                         transform: 'translate3d(0, 0, 0)',
@@ -5753,9 +5696,6 @@ const getComponentCss$P = (isPrimaryScrollerVisible, isSecondaryScrollerVisible,
                         transform: 'translate3d(100%, 0, 0)', // use correct transitions in rtl mode
                     }),
                 },
-                '&:focus-visible': {
-                    outline: 'none', // ua-style reset
-                },
                 '&::backdrop': {
                     // to improve browser backwards compatibility we visually style the backdrop on the :host,
                     // although it's not on the #top-layer like it would be for modern browsers supporting ::backdrop
@@ -5849,8 +5789,8 @@ const getContentJssStyle = () => {
 const frostedGlassBackgroundColorLight = 'rgba(238, 239, 242, 0.79)';
 const frostedGlassBackgroundColorDark = 'rgba(33, 34, 37, 0.79)';
 const getComponentCss$O = (isSecondaryScrollerVisible, theme) => {
-    const { primaryColor, backgroundSurfaceColor, focusColor, hoverColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, focusColor: focusColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
+    const { primaryColor, backgroundSurfaceColor, hoverColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
     const frostedGlassBackgroundColor = isThemeDark(theme)
         ? frostedGlassBackgroundColorDark
         : frostedGlassBackgroundColorLight;
@@ -5886,56 +5826,49 @@ const getComponentCss$O = (isSecondaryScrollerVisible, theme) => {
             '::slotted(:is(h1, h2, h3, h4, h5, h6):not(:first-child))': addImportantToEachRule({
                 margin: `calc(${spacingFluidMedium} - ${spacingFluidXSmall}) 0 0`, // spacingFluidXSmall to compensate default gap
             }),
-            '::slotted(p)': addImportantToEachRule({
-                ...textSmallStyle,
-                margin: 0,
-                color: primaryColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: primaryColorDark,
-                }),
-            }),
-            // TODO: how can we easily re-use getHoverStyle() and getFocusStyle() with ::slotted(a) selector?
-            '::slotted(a)': {
-                ...addImportantToEachRule({
+            '::slotted': addImportantToEachRule({
+                '&(p)': {
                     ...textSmallStyle,
-                    alignSelf: 'flex-start',
-                    display: 'block',
-                    textDecoration: 'none',
-                    cursor: 'pointer',
+                    margin: 0,
                     color: primaryColor,
-                    borderRadius: borderRadiusSmall,
-                    marginLeft: `-${spacingStaticXSmall}`,
-                    marginRight: `-${spacingStaticXSmall}`,
-                    padding: `2px ${spacingStaticXSmall}`,
-                    transition: `background var(${cssVariableTransitionDuration}, ${motionDurationShort}) ${motionEasingBase}`,
                     ...prefersColorSchemeDarkMediaQuery(theme, {
                         color: primaryColorDark,
                     }),
-                }),
-            },
-            ...hoverMediaQuery({
-                '::slotted(a:hover)': addImportantToEachRule({
+                },
+                '&(a)': {
+                    ...{
+                        ...textSmallStyle,
+                        alignSelf: 'flex-start',
+                        display: 'block',
+                        textDecoration: 'none',
+                        cursor: 'pointer',
+                        color: primaryColor,
+                        borderRadius: borderRadiusSmall,
+                        marginLeft: `-${spacingStaticXSmall}`,
+                        marginRight: `-${spacingStaticXSmall}`,
+                        padding: `2px ${spacingStaticXSmall}`,
+                        transition: `background var(${cssVariableTransitionDuration}, ${motionDurationShort}) ${motionEasingBase}`,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            color: primaryColorDark,
+                        }),
+                    },
+                },
+                '&(a[aria-current])': {
                     background: hoverColor,
                     ...prefersColorSchemeDarkMediaQuery(theme, {
                         background: hoverColorDark,
                     }),
+                },
+                ...hoverMediaQuery({
+                    // TODO: how can we easily re-use getHoverStyle() with ::slotted(a) selector?
+                    '&(a:hover)': {
+                        background: hoverColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            background: hoverColorDark,
+                        }),
+                    },
                 }),
-            }),
-            '::slotted(a[aria-current])': addImportantToEachRule({
-                background: hoverColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    background: hoverColorDark,
-                }),
-            }),
-            '::slotted(a:focus)': addImportantToEachRule({
-                outline: `${borderWidthBase} solid ${focusColor}`,
-                outlineOffset: '-2px',
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    outlineColor: focusColorDark,
-                }),
-            }),
-            '::slotted(a:focus:not(:focus-visible))': addImportantToEachRule({
-                outlineColor: 'transparent',
+                ...getFocusJssStyle(theme, { slotted: 'a', offset: '-2px' }),
             }),
         },
         button: {
@@ -5945,7 +5878,7 @@ const getComponentCss$O = (isSecondaryScrollerVisible, theme) => {
         },
         scroller: {
             position: 'fixed',
-            ...getInsetJssStyle(),
+            inset: 0,
             // "cssVariableTransitionDuration" ensures closing animation of secondary scroller is given when whole flyout-navigation gets closed
             // "cssVariableVisibility" ensures secondary scroller is not tabbable when whole flyout-navigation is closed
             ...(isSecondaryScrollerVisible
@@ -6048,7 +5981,6 @@ const getComponentCss$N = (isOpen, position, hasFooter, hasSubFooter, theme) =>
                     '--pds-internal-grid-outer-column': `calc(${spacingFluidLarge} - ${gridGap})`,
                     '--pds-internal-grid-margin': `calc(${spacingFluidLarge} * -1)`,
                     justifyContent: isPositionStart ? 'flex-start' : 'flex-end',
-                    ...getInsetJssStyle(),
                     ...getBackdropJssStyle(isOpen, FLYOUT_Z_INDEX, theme),
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
@@ -6520,8 +6452,6 @@ const getComponentCss$H = (state, hasAction, hasClose, theme) => {
 };
 
 const getComponentCss$G = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
-    const { focusColor } = getThemedColors(theme);
-    const { focusColor: focusColorDark } = getThemedColors('dark');
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme), {
         root: {
             textDecoration: underline ? 'underline' : 'none',
@@ -6541,31 +6471,19 @@ const getComponentCss$G = (icon, iconSource, active, stretch, size, hideLabel, a
                 '&(a)::before': {
                     content: '""',
                     position: 'fixed',
-                    top: offsetVertical,
-                    bottom: offsetVertical,
+                    insetBlock: offsetVertical,
                     borderRadius: borderRadiusSmall,
                     ...buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
-                        right: hideLabelValue ? offsetVertical : offsetHorizontal,
-                        left: hideLabelValue ? offsetVertical : offsetHorizontal,
+                        insetInline: hideLabelValue ? offsetVertical : offsetHorizontal,
                     })),
                 },
-                '&(a:focus)::before': {
-                    border: `${borderWidthBase} solid ${focusColor}`,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: focusColorDark,
-                    }),
-                },
-                '&(a:focus:not(:focus-visible))::before': {
-                    border: 0,
-                },
+                ...getFocusJssStyle(theme, { slotted: 'a', pseudo: true, offset: '-2px' }),
             },
         }),
     }));
 };
 
 const getComponentCss$F = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
-    const { focusColor } = getThemedColors(theme);
-    const { focusColor: focusColorDark } = getThemedColors('dark');
     const { linkColor } = getHighContrastColors();
     const isPrimary = variant === 'primary';
     return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, theme), {
@@ -6598,22 +6516,10 @@ const getComponentCss$F = (icon, iconSource, variant, hideLabel, hasSlottedAncho
                 '&(a)::before': {
                     content: '""',
                     position: 'fixed',
-                    borderRadius: borderRadiusMedium,
-                    ...getInsetJssStyle(-6),
-                },
-                // TODO: combine link-social-styles with link-button-styles and tabs-bar-styles
-                '&(a::-moz-focus-inner)': {
-                    border: 0,
-                },
-                '&(a:focus)::before': {
-                    border: `${borderWidthBase} solid ${focusColor}`,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: focusColorDark,
-                    }),
-                },
-                '&(a:focus:not(:focus-visible))::before': {
-                    border: 0,
+                    inset: '-2px',
+                    borderRadius: borderRadiusSmall,
                 },
+                ...getFocusJssStyle(theme, { slotted: 'a', pseudo: true }),
             },
         }),
     }));
@@ -6669,7 +6575,7 @@ const getComponentCss$E = (aspectRatio, weight, direction, hasDescription) => {
         'link-overlay': {
             // covers entire tile, used for expanded click-area only
             position: 'fixed',
-            ...getInsetJssStyle(),
+            inset: 0,
         },
     });
 };
@@ -6677,7 +6583,7 @@ const getComponentCss$E = (aspectRatio, weight, direction, hasDescription) => {
 const slottedAnchorSelector = `a[slot='${anchorSlot}']`;
 const anchorJssStyle = {
     position: 'absolute',
-    ...getInsetJssStyle(),
+    inset: 0,
     zIndex: 1, // necessary to be on top of img
     borderRadius: borderRadiusMedium,
 };
@@ -6690,8 +6596,8 @@ const getMultilineEllipsis = (lineClamp) => {
     };
 };
 const getComponentCss$D = (hasLikeButton, hasSlottedAnchor, aspectRatio, theme) => {
-    const { primaryColor, contrastHighColor, backgroundSurfaceColor, focusColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
+    const { primaryColor, contrastHighColor, backgroundSurfaceColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
     return getCss({
         '@global': {
             ':host': {
@@ -6712,17 +6618,7 @@ const getComponentCss$D = (hasLikeButton, hasSlottedAnchor, aspectRatio, theme)
                             ...anchorJssStyle,
                             textIndent: '-999999px', // hide anchor label visually but still usable for a11y (only works in RTL-mode because of `overflow: hidden;` parent)
                         },
-                        // TODO: Refactor getFocusStyles to support slotted selector
-                        [`&(${slottedAnchorSelector}:focus)`]: {
-                            outline: `${borderWidthBase} solid ${focusColor}`,
-                            outlineOffset: '2px',
-                            ...prefersColorSchemeDarkMediaQuery(theme, {
-                                outlineColor: focusColorDark,
-                            }),
-                        },
-                        [`&(${slottedAnchorSelector}:focus:not(:focus-visible))`]: {
-                            outlineColor: 'transparent',
-                        },
+                        ...getFocusJssStyle(theme, { slotted: slottedAnchorSelector }),
                     }),
                     [`&([slot="${headerSlot}"])`]: {
                         display: 'flex',
@@ -6761,7 +6657,7 @@ const getComponentCss$D = (hasLikeButton, hasSlottedAnchor, aspectRatio, theme)
         ...(!hasSlottedAnchor && {
             anchor: {
                 ...anchorJssStyle,
-                ...getFocusStyle({ borderRadius: 'medium' }),
+                ...getFocusJssStyle(theme),
             },
         }),
         header: {
@@ -6825,7 +6721,7 @@ const getComponentCss$C = (...args) => {
         'link-overlay': {
             // covers entire tile, used for expanded click-area only
             position: 'fixed',
-            ...getInsetJssStyle(),
+            inset: 0,
         },
     });
 };
@@ -6856,7 +6752,15 @@ const getComponentCss$B = (size) => {
             a: {
                 display: 'block',
                 textDecoration: 'none',
-                ...focusPseudoJssStyle,
+                outline: 0,
+                '&::before': {
+                    // needs to be defined always to have correct custom click area
+                    content: '""',
+                    position: 'absolute',
+                    inset: 0,
+                    borderRadius: '1px',
+                },
+                ...getFocusJssStyle('light', { pseudo: true }), // TODO: we need to support theme
             },
             picture: {
                 display: 'block',
@@ -6919,7 +6823,7 @@ const getSlottedJssStyle = (marginValue, hasHeader, hasDismissButton) => {
         },
         ...(!hasHeader && {
             [`&(.${stretchToFullModalWidthClassName}:first-child)`]: {
-                marginTop: hasDismissButton ? pxToRemWithUnit(-marginValue) : marginPx,
+                marginTop: hasDismissButton ? `${-marginValue / 16}rem` : marginPx,
             },
         }),
         [`&(.${stretchToFullModalWidthClassName}:last-child)`]: {
@@ -6965,7 +6869,7 @@ const getComponentCss$A = (isOpen, isFullscreen, hasDismissButton, hasHeader, ha
         },
         'scroll-container': {
             display: 'flex',
-            ...getInsetJssStyle(),
+            inset: 0, // TODO: is this still needed?
             height: '100%',
             overflowY: 'inherit',
             alignItems: 'center',
@@ -6979,10 +6883,12 @@ const getComponentCss$A = (isOpen, isFullscreen, hasDismissButton, hasHeader, ha
             transform: isOpen ? 'translateY(0%)' : 'translateY(25%)',
             opacity: isOpen ? 1 : 0,
             transition: `${getTransition('opacity', duration, easing)}, ${getTransition('transform', duration, easing)}`,
-            paddingTop: hasDismissButton ? pxToRemWithUnit(32) : contentPadding, // rem value needed to prevent overlapping of close button and contents in scaling mode
+            paddingTop: hasDismissButton ? '2rem' : contentPadding, // rem value needed to prevent overlapping of close button and contents in scaling mode
             ...(!hasFooter && { paddingBottom: contentPadding }),
             background: backgroundColor,
             outline: isHighContrastMode ? '1px solid transparent' : 0,
+            // TODO: getFocusJssStyle() can't be re-used atm, but as soon as component is refactored to `<dialog />` then no
+            //  focus should be necessary at all because focus is auto forwarded to dismiss button.
             // ::after to be above sticky footer without z-index games
             '&:focus::after': {
                 content: '""',
@@ -6992,7 +6898,7 @@ const getComponentCss$A = (isOpen, isFullscreen, hasDismissButton, hasHeader, ha
                 ...buildResponsiveStyles(isFullscreen, (fullscreenValue) => ({
                     borderRadius: fullscreenValue ? 0 : '12px',
                     borderColor: fullscreenValue ? primaryColor : darkThemePrimaryColor,
-                    ...getInsetJssStyle(fullscreenValue ? 0 : -4),
+                    inset: fullscreenValue ? 0 : '-4px',
                     ...prefersColorSchemeDarkMediaQuery(theme, {
                         borderColor: darkThemePrimaryColor,
                     }),
@@ -7260,6 +7166,7 @@ const getSlottedTextFieldTextareaSelectStyles = (child, state, isLoading, theme,
                     }),
                 },
             })),
+        // TODO: getFocusJssStyle() can't be re-used because focus style differs for form elements
         [`::slotted(${child}:focus)`]: {
             borderColor: primaryColor,
             ...prefersColorSchemeDarkMediaQuery(theme, {
@@ -7438,6 +7345,7 @@ const getInputStyles = (isDisabled, direction, isOpen, state, theme) => {
             },
         }),
         ...(!isDisabled && {
+            // TODO: getFocusJssStyle() can't be re-used because focus style differs for form elements
             '&:focus': {
                 borderColor: primaryColor,
                 ...prefersColorSchemeDarkMediaQuery(theme, {
@@ -7525,8 +7433,8 @@ const disabledCursorStyle = {
 };
 const hiddenStyle = { display: 'none' };
 const getComponentCss$w = (activePage, pageTotal, showLastPage, theme) => {
-    const { primaryColor, disabledColor, hoverColor, focusColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, hoverColor: hoverColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
+    const { primaryColor, disabledColor, hoverColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
     return getCss({
         '@global': {
             ':host': {
@@ -7604,9 +7512,9 @@ const getComponentCss$w = (activePage, pageTotal, showLastPage, theme) => {
                 whiteSpace: 'nowrap',
                 cursor: 'pointer',
                 color: primaryColor,
-                outline: 0,
                 borderRadius: borderRadiusSmall,
                 borderColor: 'transparent', // default value is needed for smooth transition
+                outline: 0, // TODO: only relevant for VRT testing with forced states - prevents :focus style
                 ...prefersColorSchemeDarkMediaQuery(theme, {
                     color: primaryColorDark,
                 }),
@@ -7619,16 +7527,6 @@ const getComponentCss$w = (activePage, pageTotal, showLastPage, theme) => {
                         }),
                     },
                 }),
-                '&:not(.ellipsis):focus:focus-visible::before': {
-                    content: '""',
-                    position: 'absolute',
-                    ...getInsetJssStyle(-4),
-                    border: `${borderWidthBase} solid ${focusColor}`,
-                    borderRadius: borderRadiusMedium,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: focusColorDark,
-                    }),
-                },
                 '&[aria-current]': {
                     ...disabledCursorStyle,
                     color: primaryColor,
@@ -7637,7 +7535,6 @@ const getComponentCss$w = (activePage, pageTotal, showLastPage, theme) => {
                         color: primaryColorDark,
                         borderColor: primaryColorDark,
                     }),
-                    '&:not(.ellipsis):focus::before': getInsetJssStyle(-6), // adjust for missing 2px border
                 },
                 '&[aria-disabled]': {
                     ...disabledCursorStyle,
@@ -7646,6 +7543,8 @@ const getComponentCss$w = (activePage, pageTotal, showLastPage, theme) => {
                         color: disabledColorDark,
                     }),
                 },
+                // TODO :not(.ellipsis) is only needed for VRT states tests to work properly
+                '&:not(.ellipsis)': getFocusJssStyle(theme),
             },
         },
         ellipsis: {
@@ -7745,6 +7644,8 @@ const getComponentCss$v = (hideLabel, state, isDisabled, isLoading, isWithinForm
         ...getFunctionalComponentLabelStyles(isDisabled, hideLabel, theme),
         // .message
         ...getFunctionalComponentStateMessageStyles(theme, state),
+        // .loading
+        ...getFunctionalComponentLoadingMessageStyles(),
     });
 };
 
@@ -7848,8 +7749,8 @@ const getDirectionArrowMap = (theme) => {
     };
 };
 const getComponentCss$u = (direction, isNative, theme) => {
-    const { hoverColor, focusColor, backgroundColor, primaryColor, backgroundSurfaceColor } = getThemedColors(theme);
-    const { hoverColor: hoverColorDark, focusColor: focusColorDark, primaryColor: primaryColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
+    const { hoverColor, backgroundColor, primaryColor, backgroundSurfaceColor } = getThemedColors(theme);
+    const { hoverColor: hoverColorDark, primaryColor: primaryColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
     const shadowColor = 'rgba(0,0,0,0.3)';
     return getCss({
         '@global': {
@@ -7868,18 +7769,17 @@ const getComponentCss$u = (direction, isNative, theme) => {
             },
             button: {
                 display: 'block',
-                position: 'relative',
                 WebkitAppearance: 'none', // iOS safari
                 appearance: 'none',
                 background: 'transparent',
                 border: 0,
                 padding: 0,
-                outline: 0,
                 cursor: 'pointer',
                 ...textSmallStyle,
                 width: fontLineHeight, // width needed to improve ssr support
                 height: fontLineHeight, // height needed to improve ssr support
                 borderRadius: '50%',
+                // TODO: we should try to use getHoverStyle()
                 ...hoverMediaQuery({
                     transition: getTransition('background-color'),
                     '&:hover': {
@@ -7890,22 +7790,7 @@ const getComponentCss$u = (direction, isNative, theme) => {
                         }),
                     },
                 }),
-                '&::before': {
-                    content: '""',
-                    position: 'absolute',
-                    ...getInsetJssStyle(-2),
-                    border: `${borderWidthBase} solid transparent`,
-                    borderRadius: '50%',
-                },
-                '&:focus::before': {
-                    borderColor: focusColor,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: focusColorDark,
-                    }),
-                },
-                '&:focus:not(:focus-visible)::before': {
-                    borderColor: 'transparent',
-                },
+                ...getFocusJssStyle(theme, { offset: 0 }),
             },
         },
         label: getHiddenTextJssStyle(),
@@ -7921,7 +7806,9 @@ const getComponentCss$u = (direction, isNative, theme) => {
                     margin: 0,
                     padding: 0,
                 }
-                : getInsetJssStyle(-safeZonePx)),
+                : {
+                    inset: `${-safeZonePx}px`,
+                }),
             position: 'absolute',
             zIndex: POPOVER_Z_INDEX,
             filter: `drop-shadow(0 0 16px ${shadowColor})`,
@@ -8007,11 +7894,6 @@ const getComponentCss$t = (hideLabel, state, isDisabled, isLoading, theme) => {
                             }),
                         },
                     }),
-                    ...(!isDisabled && {
-                        '&(input:focus)::before': {
-                            borderRadius: '50%',
-                        },
-                    }),
                 },
             })),
         },
@@ -8052,6 +7934,8 @@ const getComponentCss$t = (hideLabel, state, isDisabled, isLoading, theme) => {
         ...getFunctionalComponentStateMessageStyles(theme, state, {
             gridColumn: '1/3',
         }),
+        // .loading
+        ...getFunctionalComponentLoadingMessageStyles(),
     });
 };
 
@@ -8077,8 +7961,8 @@ const getGradient = (theme, gradientColorTheme) => {
 };
 const prevNextWrapperWidth = `calc(${fontLineHeight} + 24px)`;
 const getComponentCss$s = (gradientColor, isNextHidden, isPrevHidden, scrollIndicatorPosition, hasScrollbar, theme) => {
-    const { backgroundColor, backgroundSurfaceColor, focusColor, hoverColor } = getThemedColors(theme);
-    const { backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, focusColor: focusColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
+    const { backgroundColor, backgroundSurfaceColor, hoverColor } = getThemedColors(theme);
+    const { backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
     const backgroundColorLight = {
         'background-base': backgroundColor,
         'background-surface': backgroundSurfaceColor,
@@ -8171,24 +8055,8 @@ const getComponentCss$s = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
             minHeight: '28px',
             minWidth: '100%',
             verticalAlign: 'top',
-            outline: 0,
-            '&::before': {
-                content: '""',
-                position: 'absolute',
-                ...getInsetJssStyle(-4),
-                border: `${borderWidthBase} solid transparent`,
-                borderRadius: borderRadiusSmall,
-                pointerEvents: 'none', // Needed to enable clicks inside of slot
-            },
-            '&:focus::before': {
-                borderColor: focusColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    borderColor: focusColorDark,
-                }),
-            },
-            '&:focus:not(:focus-visible)::before': {
-                borderColor: 'transparent',
-            },
+            borderRadius: borderRadiusSmall,
+            ...getFocusJssStyle(theme),
         },
         trigger: {
             position: 'absolute',
@@ -8246,8 +8114,8 @@ const getComponentCss$s = (gradientColor, isNextHidden, isPrevHidden, scrollIndi
 };
 
 const ITEM_PADDING = '17px';
-const ICON_SIZE = pxToRemWithUnit(24);
-const ICON_MARGIN = pxToRemWithUnit(4);
+const ICON_SIZE = '1.5rem';
+const ICON_MARGIN = '.25rem';
 const getColors$2 = (isDisabled, isSelected, theme) => {
     const { primaryColor, contrastMediumColor, disabledColor, contrastLowColor } = getThemedColors(theme);
     const { highlightColor } = getHighContrastColors();
@@ -8260,8 +8128,6 @@ const getColors$2 = (isDisabled, isSelected, theme) => {
 };
 const getItemPadding = (hasIconAndSlottedContent) => hasIconAndSlottedContent ? `13px ${ITEM_PADDING} 13px 13px` : `13px ${ITEM_PADDING}`;
 const getComponentCss$r = (isDisabled, isSelected, hasIcon, hasSlottedContent, theme) => {
-    const { focusColor } = getThemedColors(theme);
-    const { focusColor: focusColorDark } = getThemedColors('dark');
     const { buttonColor, labelColor, borderColor, hoverBorderColor } = getColors$2(isDisabled, isSelected, theme);
     const { buttonColor: buttonColorDark, labelColor: labelColorDark, borderColor: borderColorDark, hoverBorderColor: hoverBorderColorDark, } = getColors$2(isDisabled, isSelected, 'dark');
     return getCss({
@@ -8283,30 +8149,9 @@ const getComponentCss$r = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
                 margin: 0, // Removes default button margin on safari 15
                 border: `${borderWidthBase} solid ${borderColor}`,
                 borderRadius: borderRadiusSmall,
-                outline: 0,
                 background: 'transparent',
                 color: buttonColor,
                 ...textSmallStyle,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    borderColor: borderColorDark,
-                    color: buttonColorDark,
-                }),
-                '&::before': {
-                    content: '""',
-                    position: 'absolute',
-                    ...getInsetJssStyle(-5),
-                    border: `${borderWidthBase} solid transparent`,
-                    borderRadius: '7px',
-                },
-                '&:focus::before': {
-                    borderColor: focusColor,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: focusColorDark,
-                    }),
-                },
-                '&:focus:not(:focus-visible)::before': {
-                    borderColor: 'transparent',
-                },
                 ...(isDisabled
                     ? {
                         cursor: 'not-allowed',
@@ -8324,6 +8169,11 @@ const getComponentCss$r = (isDisabled, isSelected, hasIcon, hasSlottedContent, t
                                 },
                             })),
                     }),
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: borderColorDark,
+                    color: buttonColorDark,
+                }),
+                ...getFocusJssStyle(theme),
             },
             // label
             span: {
@@ -8382,7 +8232,7 @@ const getButtonStyles = (direction, isOpen, state, theme) => {
             // TODO: extract generic default button/anchor reset style
             button: {
                 position: 'absolute',
-                ...getInsetJssStyle(),
+                inset: 0,
                 width: '100%', // fixes Firefox positioning issue
                 height: '100%', // fixes Firefox positioning issue
                 margin: 0,
@@ -8396,6 +8246,7 @@ const getButtonStyles = (direction, isOpen, state, theme) => {
                 ...prefersColorSchemeDarkMediaQuery(theme, {
                     borderColor: isOpen ? primaryColorDark : formStateColorDark || contrastMediumColorDark,
                 }),
+                // TODO: getFocusJssStyle() can't be re-used because focus style differs for form elements
                 '&:focus, &:focus ~ ul': {
                     borderColor: primaryColor,
                     ...prefersColorSchemeDarkMediaQuery(theme, {
@@ -8444,7 +8295,7 @@ const getFilterStyles = (direction, isOpen, state, disabled, theme) => {
             input: {
                 display: 'block',
                 position: 'absolute',
-                ...getInsetJssStyle(2), // 2 = borderWidthBase
+                inset: borderWidthBase,
                 width: 'calc(100% - 4px)', // fixes Firefox positioning issue, 4px = 2 x borderWidthBase
                 height: 'calc(100% - 4px)', // fixes Firefox positioning issue, 4px = 2 x borderWidthBase
                 zIndex: 1,
@@ -8513,7 +8364,7 @@ const getFilterStyles = (direction, isOpen, state, disabled, theme) => {
                 '&+span': {
                     // for focus outline and clicking arrow since input ends left of the icon
                     position: 'absolute',
-                    ...getInsetJssStyle(),
+                    inset: 0,
                     transition: getTransition('border-color'),
                     pointerEvents: 'all',
                     cursor: disabled ? 'not-allowed' : 'pointer',
@@ -8842,8 +8693,8 @@ const getSVGPath = (stepCount, numberedCircleColors, isStateCurrent) => {
     return svgNumberedCirclePaths[stepCount];
 };
 const getComponentCss$m = (state, disabled, theme) => {
-    const { primaryColor, hoverColor, disabledColor, focusColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, disabledColor: disabledColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
+    const { primaryColor, hoverColor, disabledColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, disabledColor: disabledColorDark, } = getThemedColors('dark');
     const isStateCurrent = state === 'current';
     const isStateCurrentOrUndefined = !state || isStateCurrent;
     const isDisabled = !state || disabled;
@@ -8885,7 +8736,6 @@ const getComponentCss$m = (state, disabled, theme) => {
                 margin: 0, // Removes default button margin on safari 15
                 background: 0,
                 border: 0,
-                outline: 0,
                 ...textSmallStyle,
                 fontSize: 'inherit',
                 width: 'max-content',
@@ -8921,19 +8771,7 @@ const getComponentCss$m = (state, disabled, theme) => {
                         width: fontLineHeight,
                     },
                 }),
-                '&:focus::after': {
-                    content: '""',
-                    position: 'absolute',
-                    ...getInsetJssStyle(),
-                    border: `${borderWidthBase} solid ${focusColor}`,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: focusColorDark,
-                    }),
-                    borderRadius: borderRadiusSmall,
-                },
-                '&:focus:not(:focus-visible)::after': {
-                    borderColor: 'transparent',
-                },
+                ...getFocusJssStyle(theme, { offset: '-2px' }),
             },
         },
         ...(!isStateCurrentOrUndefined && {
@@ -8996,128 +8834,105 @@ const getColors$1 = (checked, disabled, loading, theme) => {
 const getComponentCss$k = (alignLabel, hideLabel, stretch, checked, disabled, loading, theme) => {
     const { buttonBorderColor, buttonBorderColorHover, buttonBackgroundColor, buttonBackgroundColorHover, toggleBackgroundColor, toggleBackgroundColorHover, textColor, } = getColors$1(checked, disabled, loading, theme);
     const { buttonBorderColor: buttonBorderColorDark, buttonBorderColorHover: buttonBorderColorHoverDark, buttonBackgroundColor: buttonBackgroundColorDark, buttonBackgroundColorHover: buttonBackgroundColorHoverDark, toggleBackgroundColor: toggleBackgroundColorDark, toggleBackgroundColorHover: toggleBackgroundColorHoverDark, textColor: textColorDark, } = getColors$1(checked, disabled, loading, 'dark');
-    const { focusColor } = getThemedColors(theme);
-    const { focusColor: focusColorDark } = getThemedColors('dark');
     return getCss({
         '@global': {
             ':host': {
                 ...buildResponsiveStyles(stretch, (stretchValue) => ({
-                    display: stretchValue ? 'block' : 'inline-block',
+                    display: stretchValue ? 'flex' : 'inline-flex',
                 })),
                 ...addImportantToEachRule({
                     outline: 0, // custom element is able to delegate the focus
+                    gap: spacingStaticSmall,
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
                     ...buildResponsiveStyles(stretch, (stretchValue) => ({
+                        justifyContent: stretchValue ? 'space-between' : 'flex-start',
                         width: stretchValue ? '100%' : 'auto', // prevents adjusting its size when used as flex or grid child
                         ...(!stretchValue && { verticalAlign: 'top' }),
                     })),
                 }),
             },
-        },
-        root: {
-            display: 'flex',
-            alignItems: 'flex-start',
-            gap: spacingStaticSmall,
-            width: '100%',
-            padding: 0,
-            margin: 0, // Removes default button margin on safari 15
-            outline: 0,
-            border: 0,
-            textAlign: 'start',
-            background: 'transparent',
-            WebkitAppearance: 'none', // iOS safari
-            appearance: 'none',
-            cursor: isDisabledOrLoading(disabled, loading) ? 'auto' : 'pointer',
-            ...buildResponsiveStyles(stretch, (stretchValue) => ({
-                justifyContent: stretchValue ? 'space-between' : 'flex-start',
-            })),
-            ...(!isDisabledOrLoading(disabled, loading) &&
-                hoverMediaQuery({
-                    '&:hover .switch': {
-                        borderColor: buttonBorderColorHover,
-                        backgroundColor: buttonBackgroundColorHover,
-                        ...prefersColorSchemeDarkMediaQuery(theme, {
-                            borderColor: buttonBorderColorHoverDark,
-                            backgroundColor: buttonBackgroundColorHoverDark,
-                        }),
-                        '& .toggle': {
-                            backgroundColor: toggleBackgroundColorHover,
+            button: {
+                display: 'flex',
+                alignItems: 'center',
+                flexShrink: 0,
+                width: '48px',
+                height: '28px',
+                boxSizing: 'border-box',
+                border: `${borderWidthBase} solid ${buttonBorderColor}`,
+                borderRadius: '14px',
+                backgroundColor: buttonBackgroundColor,
+                cursor: isDisabledOrLoading(disabled, loading) ? 'not-allowed' : 'pointer',
+                transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: buttonBorderColorDark,
+                    backgroundColor: buttonBackgroundColorDark,
+                }),
+                margin: 0, // Removes default button margin on safari 15
+                padding: 0,
+                WebkitAppearance: 'none', // iOS safari
+                appearance: 'none',
+                ...(!isDisabledOrLoading(disabled, loading) &&
+                    hoverMediaQuery({
+                        '&:hover': {
+                            borderColor: buttonBorderColorHover,
+                            backgroundColor: buttonBackgroundColorHover,
                             ...prefersColorSchemeDarkMediaQuery(theme, {
-                                backgroundColor: toggleBackgroundColorHoverDark,
+                                borderColor: buttonBorderColorHoverDark,
+                                backgroundColor: buttonBackgroundColorHoverDark,
                             }),
+                            '& .toggle': {
+                                backgroundColor: toggleBackgroundColorHover,
+                                ...prefersColorSchemeDarkMediaQuery(theme, {
+                                    backgroundColor: toggleBackgroundColorHoverDark,
+                                }),
+                            },
                         },
-                    },
-                })),
-            '&:focus .switch::before': {
-                content: '""',
-                position: 'absolute',
-                ...getInsetJssStyle(-6),
-                border: `${borderWidthBase} solid ${focusColor}`,
+                    })),
+                ...getFocusJssStyle(theme),
+            },
+            label: {
+                ...textSmallStyle,
+                minWidth: 0, // prevents flex child to overflow max available parent size
+                minHeight: 0, // prevents flex child to overflow max available parent size
+                cursor: isDisabledOrLoading(disabled, loading) ? 'not-allowed' : 'pointer',
+                color: textColor,
                 ...prefersColorSchemeDarkMediaQuery(theme, {
-                    borderColor: focusColorDark,
+                    color: textColorDark,
                 }),
-                borderRadius: '18px',
-            },
-            '&:not(:focus-visible) .switch::before': {
-                borderColor: 'transparent',
+                ...mergeDeep(buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
+                    // TODO: we should remove 'left' here and map the value in the component class already to 'start' but might be difficult due to breakpoint customizable prop value
+                    order: alignLabelValue === 'left' || alignLabelValue === 'start' ? -1 : 0,
+                })), buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, {
+                    paddingTop: '2px', // currently, line-height of textSmall doesn't match height of switch
+                }))),
             },
         },
-        switch: {
-            position: 'relative',
-            width: '48px',
-            height: '28px',
-            flexShrink: 0,
-            boxSizing: 'border-box',
-            border: `${borderWidthBase} solid ${buttonBorderColor}`,
-            borderRadius: '14px',
-            backgroundColor: buttonBackgroundColor,
-            cursor: isDisabledOrLoading(disabled, loading) ? 'not-allowed' : 'pointer',
-            transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                borderColor: buttonBorderColorDark,
-                backgroundColor: buttonBackgroundColorDark,
-            }),
-        },
         toggle: {
-            position: 'absolute',
-            top: '2px',
-            left: '2px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
             width: '20px',
             height: '20px',
-            display: 'block',
             borderRadius: '50%',
             backgroundColor: toggleBackgroundColor,
+            transition: `${getTransition('background-color')}, ${getTransition('transform')}`,
+            transform: `translate3d(${checked ? '22px' : '2px'}, 0, 0)`,
+            '&:dir(rtl)': {
+                transform: `translate3d(${checked ? '-22px' : '-2px'}, 0, 0)`,
+            },
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 backgroundColor: toggleBackgroundColorDark,
             }),
-            transform: `translate3d(${checked ? '20px' : '0'}, 0, 0)`,
-            transition: `${getTransition('background-color')}, ${getTransition('transform')}`,
         },
         ...(loading && {
             spinner: {
-                position: 'absolute',
-                top: '-4px',
-                left: '-4px',
                 width: '28px',
                 height: '28px',
             },
         }),
-        label: {
-            ...textSmallStyle,
-            minWidth: 0, // prevents flex child to overflow max available parent size
-            minHeight: 0, // prevents flex child to overflow max available parent size
-            color: textColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: textColorDark,
-            }),
-            ...mergeDeep(buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
-                // TODO: we should remove 'left' here and map the value in the component class already to 'start' but might be difficult due to breakpoint customizable prop value
-                order: alignLabelValue === 'left' || alignLabelValue === 'start' ? -1 : 0,
-            })), buildResponsiveStyles(hideLabel, (isHidden) => getHiddenTextJssStyle(isHidden, {
-                paddingTop: '2px', // currently, line-height of textSmall doesn't match height of switch
-            }))),
-        },
+        // .loading
+        ...getFunctionalComponentLoadingMessageStyles(),
     });
 };
 
@@ -9204,7 +9019,7 @@ const getComponentCss$h = (theme) => {
     });
 };
 
-const { hoverColor, focusColor } = getThemedColors('light'); // hover color and focus color are the same for light and dark
+const { hoverColor } = getThemedColors('light'); // hover color and focus color are the same for light and dark
 const buttonBeforeOffsetVertical = '-2px';
 const buttonBeforeOffsetHorizontal = '-4px';
 const getComponentCss$g = (active, direction, hideLabel, multiline) => {
@@ -9231,7 +9046,6 @@ const getComponentCss$g = (active, direction, hideLabel, multiline) => {
                         padding: 0,
                         font: 'inherit',
                         color: 'inherit',
-                        outline: 0,
                         alignItems: 'flex-end',
                         WebkitAppearance: 'none', // iOS safari
                         appearance: 'none',
@@ -9240,19 +9054,17 @@ const getComponentCss$g = (active, direction, hideLabel, multiline) => {
                         border: 0,
                         zIndex: 0,
                         cursor: 'pointer',
+                        // TODO: re-think if ::before is still needed
                         '&::before': {
                             content: '""',
                             position: 'absolute',
-                            top: buttonBeforeOffsetVertical,
-                            bottom: buttonBeforeOffsetVertical,
-                            right: buttonBeforeOffsetHorizontal,
-                            left: buttonBeforeOffsetHorizontal,
+                            inset: `${buttonBeforeOffsetVertical} ${buttonBeforeOffsetHorizontal}`,
                             borderRadius: borderRadiusSmall,
                             zIndex: -1, // needed so that text behind element is selectable and/or visible
                             transition: getTransition('background-color'),
                         },
                         ...hoverMediaQuery({
-                            '&:hover, &:focus': {
+                            '&:hover, &:focus-visible': {
                                 '& .icon': {
                                     opacity: 1,
                                 },
@@ -9262,12 +9074,8 @@ const getComponentCss$g = (active, direction, hideLabel, multiline) => {
                                 backgroundColor: hoverColor,
                             },
                         }),
-                        '&:focus::before': {
-                            border: `${borderWidthBase} solid ${focusColor}`,
-                        },
-                        '&:not(:focus-visible)::before': {
-                            border: 0,
-                        },
+                        // TODO: to be future proof, we need to pass theme parameter
+                        ...getFocusJssStyle('light', { pseudo: true, offset: '-2px' }),
                     },
                 }
                 : hideLabel && {
@@ -9343,8 +9151,8 @@ const scrollerAnimatedCssClass = 'scroller--animated';
 const targetSelectors = ['a', 'button'];
 const transformSelector = (selector) => targetSelectors.map((tag) => selector.replace(/\[role]/g, tag)).join();
 const getComponentCss$c = (size, weight, theme) => {
-    const { primaryColor, hoverColor, focusColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
+    const { primaryColor, hoverColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, hoverColor: hoverColorDark } = getThemedColors('dark');
     const barJssStyle = {
         position: 'absolute',
         height: '2px',
@@ -9371,6 +9179,12 @@ const getComponentCss$c = (size, weight, theme) => {
                 }),
             },
             ...addImportantToEachRule({
+                '::slotted': {
+                    // TODO: produces duplicated css code in SSR context, we should try to make use of multiple selector like
+                    //  `::slotted(:is(a,button))`.
+                    ...getFocusJssStyle(theme, { slotted: 'a', offset: '1px' }),
+                    ...getFocusJssStyle(theme, { slotted: 'button', offset: '1px' }),
+                },
                 // would be nice to use shared selector like '::slotted([role])'
                 // but this doesn't work reliably when rendering in browser
                 [transformSelector('::slotted([role])')]: {
@@ -9379,6 +9193,7 @@ const getComponentCss$c = (size, weight, theme) => {
                     position: 'relative',
                     margin: '0 0 4px 0',
                     verticalAlign: 'top',
+                    // TODO: can we use `all: 'inherit'` instead?
                     fontFamily: 'inherit',
                     fontStyle: 'inherit',
                     fontVariant: 'inherit',
@@ -9432,13 +9247,6 @@ const getComponentCss$c = (size, weight, theme) => {
                     bottom: isHighContrastMode ? '-4px' : '-6px',
                     visibility: 'inherit',
                 },
-                // TODO: combine link-social-styles with link-button-styles and tabs-bar-styles
-                [transformSelector('::slotted([role]:focus:focus-visible)::before')]: {
-                    border: `${borderWidthBase} solid ${focusColor}`,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: focusColorDark,
-                    }),
-                },
                 [transformSelector('::slotted([role]:not(:last-child))')]: {
                     marginInlineEnd: spacingStaticMedium,
                 },
@@ -9474,30 +9282,20 @@ const getComponentCss$c = (size, weight, theme) => {
 };
 
 const getComponentCss$b = (theme) => {
-    const { primaryColor, focusColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, focusColor: focusColorDark } = getThemedColors('dark');
+    const { primaryColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark } = getThemedColors('dark');
     return getCss({
         '@global': {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    position: 'relative',
                     color: primaryColor, // enables color inheritance for e.g. slotted anchor
-                    outline: 0,
+                    borderRadius: '2px',
                     ...hostHiddenStyles,
                     ...prefersColorSchemeDarkMediaQuery(theme, {
                         color: primaryColorDark,
                     }),
-                    '&(:focus:focus-visible)::before': {
-                        content: '""',
-                        position: 'absolute',
-                        ...getInsetJssStyle(-4),
-                        border: `${borderWidthBase} solid ${focusColor}`,
-                        borderRadius: borderRadiusSmall,
-                        ...prefersColorSchemeDarkMediaQuery(theme, {
-                            borderColor: focusColorDark,
-                        }),
-                    },
+                    ...getFocusJssStyle(theme, { slotted: true }),
                 }),
             },
         },
@@ -9521,20 +9319,6 @@ const getComponentCss$a = () => {
     });
 };
 
-const getTagFocusJssStyle = (themedColors) => {
-    return {
-        '&:focus::before': {
-            content: '""',
-            position: 'absolute',
-            ...getInsetJssStyle(-4),
-            border: `${borderWidthBase} solid ${themedColors.focusColor}`,
-            borderRadius: borderRadiusMedium,
-        },
-        '&:focus:not(:focus-visible)::before': {
-            borderColor: 'transparent',
-        },
-    };
-};
 const getThemedBackgroundColor = (tagColor, themedColors) => {
     const colorMap = {
         'background-base': themedColors.backgroundColor,
@@ -9581,7 +9365,10 @@ const getComponentCss$9 = (color, hasLabel, theme) => {
                 color: primaryColor,
                 textAlign: 'start',
                 ...textSmallStyle,
-                outline: isHighContrastMode ? '1px solid transparent' : 0,
+                ...(isHighContrastMode && {
+                    // TODO: using border would increase the dimension but using outline interferes with the focus style
+                    outline: '1px solid transparent',
+                }),
                 ...prefersColorSchemeDarkMediaQuery(theme, {
                     background: backgroundColorDark,
                     color: primaryColorDark,
@@ -9594,7 +9381,7 @@ const getComponentCss$9 = (color, hasLabel, theme) => {
                         }),
                     },
                 }),
-                ...getTagFocusJssStyle(themedColors),
+                ...getFocusJssStyle(theme),
             },
         },
         ...(hasLabel && {
@@ -9637,7 +9424,6 @@ const getColors = (themedColors, tagColor, theme) => {
     const { primaryColor } = tagColor === 'primary' ? getInvertedThemedColors(theme) : themedColors;
     return {
         primaryColor,
-        focusColor: themedColors.focusColor,
         backgroundColor: getThemedBackgroundColor(tagColor, themedColors),
         backgroundHoverColor: getThemedBackgroundHoverColor(tagColor, themedColors, theme),
     };
@@ -9700,11 +9486,14 @@ const getComponentCss$8 = (tagColor, isFocusable, theme) => {
                     border: 0,
                     textAlign: 'start',
                 },
-                // Transform selectors of getTagFocusJssStyle() to fit the ::slotted syntax
-                ...Object.entries(getTagFocusJssStyle(themedColors)).reduce((result, [key, value]) => {
-                    result[key.replace(/^&([a-z:\-()]*)(::[a-z\-]+)$/, '&(a$1)$2, &(button$1)$2')] = value;
-                    return result;
-                }, {}),
+                '&(a)::before,&(button)::before': {
+                    content: '""',
+                    position: 'absolute',
+                    inset: 0,
+                    borderRadius: '4px',
+                },
+                ...getFocusJssStyle(theme, { slotted: 'a', pseudo: true }),
+                ...getFocusJssStyle(theme, { slotted: 'button', pseudo: true }),
                 '&(br)': {
                     display: 'none',
                 },
@@ -10081,7 +9870,14 @@ const getComponentCss = (size, theme) => {
             },
             a: {
                 textDecoration: 'none',
-                ...focusPseudoJssStyle,
+                '&::before': {
+                    // needs to be defined always to have correct custom click area
+                    content: '""',
+                    position: 'absolute',
+                    inset: 0,
+                    borderRadius: '1px',
+                },
+                ...getFocusJssStyle('light', { pseudo: true }), // TODO: we need to support theme
             },
             svg: isHighContrastMode
                 ? {
@@ -10097,4 +9893,4 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-export { getComponentCss$13 as getAccordionCss, getComponentCss$12 as getBannerCss, getComponentCss$_ as getButtonCss, getComponentCss$11 as getButtonGroupCss, getComponentCss$10 as getButtonPureCss, getComponentCss$$ as getButtonTileCss, getComponentCss$Z as getCarouselCss, getComponentCss$Y as getCheckboxWrapperCss, getComponentCss$X as getContentWrapperCss, getComponentCss$W as getCrestCss, getComponentCss$V as getDisplayCss, getComponentCss$U as getDividerCss, getComponentCss$S as getFieldsetCss, getComponentCss$T as getFieldsetWrapperCss, getComponentCss$Q as getFlexCss, getComponentCss$R as getFlexItemCss, getComponentCss$N as getFlyoutCss, getComponentCss$P as getFlyoutNavigationCss, getComponentCss$O as getFlyoutNavigationItemCss, getFunctionalComponentLabelStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$L as getGridCss, getComponentCss$M as getGridItemCss, getComponentCss$K as getHeadingCss, getComponentCss$J as getHeadlineCss, getComponentCss$I as getIconCss, getComponentCss$H as getInlineNotificationCss, getComponentCss$F as getLinkCss, getComponentCss$G as getLinkPureCss, getComponentCss$F as getLinkSocialCss, getComponentCss$C as getLinkTileCss, getComponentCss$E as getLinkTileModelSignatureCss, getComponentCss$D as getLinkTileProductCss, getComponentCss$B as getMarqueCss, getComponentCss$A as getModalCss, getComponentCss$z as getModelSignatureCss, getComponentCss$x as getMultiSelectCss, getComponentCss$y as getMultiSelectOptionCss, getComponentCss$w as getPaginationCss, getComponentCss$v as getPinCodeCss, getComponentCss$u as getPopoverCss, getComponentCss$t as getRadioButtonWrapperCss, getComponentCss$s as getScrollerCss, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$o as getSelectWrapperCss, getComponentCss$p 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 };
+export { getComponentCss$13 as getAccordionCss, getComponentCss$12 as getBannerCss, getComponentCss$_ as getButtonCss, getComponentCss$11 as getButtonGroupCss, getComponentCss$10 as getButtonPureCss, getComponentCss$$ as getButtonTileCss, getComponentCss$Z as getCarouselCss, getComponentCss$Y as getCheckboxWrapperCss, getComponentCss$X as getContentWrapperCss, getComponentCss$W as getCrestCss, getComponentCss$V as getDisplayCss, getComponentCss$U as getDividerCss, getComponentCss$S as getFieldsetCss, getComponentCss$T as getFieldsetWrapperCss, getComponentCss$Q as getFlexCss, getComponentCss$R as getFlexItemCss, getComponentCss$N as getFlyoutCss, getComponentCss$P as getFlyoutNavigationCss, getComponentCss$O as getFlyoutNavigationItemCss, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$L as getGridCss, getComponentCss$M as getGridItemCss, getComponentCss$K as getHeadingCss, getComponentCss$J as getHeadlineCss, getComponentCss$I as getIconCss, getComponentCss$H as getInlineNotificationCss, getComponentCss$F as getLinkCss, getComponentCss$G as getLinkPureCss, getComponentCss$F as getLinkSocialCss, getComponentCss$C as getLinkTileCss, getComponentCss$E as getLinkTileModelSignatureCss, getComponentCss$D as getLinkTileProductCss, getComponentCss$B as getMarqueCss, getComponentCss$A as getModalCss, getComponentCss$z as getModelSignatureCss, getComponentCss$x as getMultiSelectCss, getComponentCss$y as getMultiSelectOptionCss, getComponentCss$w as getPaginationCss, getComponentCss$v as getPinCodeCss, getComponentCss$u as getPopoverCss, getComponentCss$t as getRadioButtonWrapperCss, getComponentCss$s as getScrollerCss, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$o as getSelectWrapperCss, getComponentCss$p 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 };