@razorpay/blade 10.14.0 → 10.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -15267,7 +15267,7 @@ var StyledInput = /*#__PURE__*/styled.input.withConfig({
15267
15267
  hasError = _ref2.hasError,
15268
15268
  hoverTokens = _ref2.hoverTokens;
15269
15269
  return _objectSpread$1w(_objectSpread$1w({}, screenReaderStyles), {}, {
15270
- '&:focus + div': {
15270
+ '&:focus-visible + div': {
15271
15271
  // TODO: Replace with focus outline token
15272
15272
  outline: "1px solid ".concat(theme.colors.surface.background.level1.lowContrast),
15273
15273
  boxShadow: "0px 0px 0px 4px ".concat(theme.colors.brand.primary[400])
@@ -16226,7 +16226,7 @@ var StyledButton = /*#__PURE__*/styled.button.withConfig({
16226
16226
  '&:hover': {
16227
16227
  color: iconColorToken.hover[contrastToken]
16228
16228
  },
16229
- '&:focus': {
16229
+ '&:focus-visible': {
16230
16230
  outline: 'none',
16231
16231
  boxShadow: "0px 0px 0px 4px ".concat(theme.colors.brand.primary[400]),
16232
16232
  color: iconColorToken.focus[contrastToken]
@@ -17105,7 +17105,7 @@ var StyledLink$1 = /*#__PURE__*/styled.button.withConfig({
17105
17105
  width: 'max-content',
17106
17106
  borderRadius: makeBorderSize(props.theme.border.radius.small)
17107
17107
  },
17108
- '&:focus': {
17108
+ '&:focus-visible': {
17109
17109
  '.content-container': {
17110
17110
  boxShadow: "0px 0px 0px 4px ".concat(props.focusRingColor)
17111
17111
  }
@@ -18905,7 +18905,7 @@ var getIndicatorButtonStyles = function getIndicatorButtonStyles(_ref) {
18905
18905
  padding: makeSize(size[10]),
18906
18906
  paddingTop: makeSize(size[20])
18907
18907
  },
18908
- '&:focus': {
18908
+ '&:focus-visible': {
18909
18909
  // TODO: refactor to use focus ring token
18910
18910
  outline: 'none',
18911
18911
  boxShadow: "0px 0px 0px 4px ".concat(theme.colors.brand.primary[400])
@@ -19049,7 +19049,7 @@ var getNavigationButtonStyles = function getNavigationButtonStyles(props) {
19049
19049
  borderColor: borderColorToken.hover,
19050
19050
  backgroundColor: backgroundColor[variant].hover
19051
19051
  },
19052
- '&:focus': {
19052
+ '&:focus-visible': {
19053
19053
  // TODO: refactor to use focus ring token
19054
19054
  outline: 'none',
19055
19055
  boxShadow: "0px 0px 0px 4px ".concat(theme.colors.brand.primary[400]),
@@ -29984,7 +29984,7 @@ var StyledAccordionButton = /*#__PURE__*/styled.button.withConfig({
29984
29984
  width: '100%',
29985
29985
  border: 'none',
29986
29986
  textAlign: 'left',
29987
- '&:hover, &:focus': {
29987
+ '&:hover, &:focus-visible': {
29988
29988
  backgroundColor: getBackgroundColor({
29989
29989
  theme: theme,
29990
29990
  isExpanded: isExpanded,
@@ -29994,7 +29994,7 @@ var StyledAccordionButton = /*#__PURE__*/styled.button.withConfig({
29994
29994
  '&:hover': {
29995
29995
  color: theme.colors.surface.action.icon.hover.lowContrast
29996
29996
  },
29997
- '&:focus': {
29997
+ '&:focus-visible': {
29998
29998
  outline: 'none',
29999
29999
  boxShadow: "0px 0px 0px 4px ".concat(theme.colors.brand.primary[400]),
30000
30000
  // only need border radius on the focus ring
@@ -31166,7 +31166,7 @@ var StyledPopoverInteractiveWrapper = /*#__PURE__*/styled.button.withConfig({
31166
31166
  appearance: 'none',
31167
31167
  cursor: 'pointer',
31168
31168
  lineHeight: 0,
31169
- '&:focus': {
31169
+ '&:focus-visible': {
31170
31170
  // TODO: refactor to use focus ring token
31171
31171
  outline: 'none',
31172
31172
  boxShadow: "0px 0px 0px 4px ".concat(props.theme.colors.brand.primary[400])