@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.
@@ -15051,7 +15051,7 @@ var StyledInput = /*#__PURE__*/styled.input.withConfig({
15051
15051
  hasError = _ref2.hasError,
15052
15052
  hoverTokens = _ref2.hoverTokens;
15053
15053
  return _objectSpread$1w(_objectSpread$1w({}, screenReaderStyles), {}, {
15054
- '&:focus + div': {
15054
+ '&:focus-visible + div': {
15055
15055
  // TODO: Replace with focus outline token
15056
15056
  outline: "1px solid ".concat(theme.colors.surface.background.level1.lowContrast),
15057
15057
  boxShadow: "0px 0px 0px 4px ".concat(theme.colors.brand.primary[400])
@@ -15980,7 +15980,7 @@ var StyledButton = /*#__PURE__*/styled.button.withConfig({
15980
15980
  '&:hover': {
15981
15981
  color: iconColorToken.hover[contrastToken]
15982
15982
  },
15983
- '&:focus': {
15983
+ '&:focus-visible': {
15984
15984
  outline: 'none',
15985
15985
  boxShadow: "0px 0px 0px 4px ".concat(theme.colors.brand.primary[400]),
15986
15986
  color: iconColorToken.focus[contrastToken]
@@ -16851,7 +16851,7 @@ var StyledLink$1 = /*#__PURE__*/styled.button.withConfig({
16851
16851
  width: 'max-content',
16852
16852
  borderRadius: makeBorderSize(props.theme.border.radius.small)
16853
16853
  },
16854
- '&:focus': {
16854
+ '&:focus-visible': {
16855
16855
  '.content-container': {
16856
16856
  boxShadow: "0px 0px 0px 4px ".concat(props.focusRingColor)
16857
16857
  }
@@ -18580,7 +18580,7 @@ var getIndicatorButtonStyles = function getIndicatorButtonStyles(_ref) {
18580
18580
  padding: makeSize(size[10]),
18581
18581
  paddingTop: makeSize(size[20])
18582
18582
  },
18583
- '&:focus': {
18583
+ '&:focus-visible': {
18584
18584
  // TODO: refactor to use focus ring token
18585
18585
  outline: 'none',
18586
18586
  boxShadow: "0px 0px 0px 4px ".concat(theme.colors.brand.primary[400])
@@ -18724,7 +18724,7 @@ var getNavigationButtonStyles = function getNavigationButtonStyles(props) {
18724
18724
  borderColor: borderColorToken.hover,
18725
18725
  backgroundColor: backgroundColor[variant].hover
18726
18726
  },
18727
- '&:focus': {
18727
+ '&:focus-visible': {
18728
18728
  // TODO: refactor to use focus ring token
18729
18729
  outline: 'none',
18730
18730
  boxShadow: "0px 0px 0px 4px ".concat(theme.colors.brand.primary[400]),
@@ -29513,7 +29513,7 @@ var StyledAccordionButton = /*#__PURE__*/styled.button.withConfig({
29513
29513
  width: '100%',
29514
29514
  border: 'none',
29515
29515
  textAlign: 'left',
29516
- '&:hover, &:focus': {
29516
+ '&:hover, &:focus-visible': {
29517
29517
  backgroundColor: getBackgroundColor({
29518
29518
  theme: theme,
29519
29519
  isExpanded: isExpanded,
@@ -29523,7 +29523,7 @@ var StyledAccordionButton = /*#__PURE__*/styled.button.withConfig({
29523
29523
  '&:hover': {
29524
29524
  color: theme.colors.surface.action.icon.hover.lowContrast
29525
29525
  },
29526
- '&:focus': {
29526
+ '&:focus-visible': {
29527
29527
  outline: 'none',
29528
29528
  boxShadow: "0px 0px 0px 4px ".concat(theme.colors.brand.primary[400]),
29529
29529
  // only need border radius on the focus ring
@@ -30653,7 +30653,7 @@ var StyledPopoverInteractiveWrapper = /*#__PURE__*/styled.button.withConfig({
30653
30653
  appearance: 'none',
30654
30654
  cursor: 'pointer',
30655
30655
  lineHeight: 0,
30656
- '&:focus': {
30656
+ '&:focus-visible': {
30657
30657
  // TODO: refactor to use focus ring token
30658
30658
  outline: 'none',
30659
30659
  boxShadow: "0px 0px 0px 4px ".concat(props.theme.colors.brand.primary[400])