@kaizen/components 1.74.1 → 1.74.3

package/dist/cjs/Input/Input/Input.cjs

@@ -37,9 +37,7 @@ var Input = function (_a) {
     defaultValue: defaultValue,
     disabled: disabled,
     className: classnames__default.default(Input_module.input, Input_module[status], classNameOverride, reversed ? Input_module.reversed : Input_module.default, disabled && Input_module.disabled)
-  }, restProps)), React__default.default.createElement("div", {
-    className: Input_module.focusRing
-  }), endIconAdornment && React__default.default.createElement("div", {
+  }, restProps)), endIconAdornment && React__default.default.createElement("div", {
     className: Input_module.endIconAdornment
   }, endIconAdornment));
 };

package/dist/cjs/Input/Input/Input.module.scss.cjs

@@ -6,7 +6,6 @@ var styles = {
   "input": "Input-module_input__d-Moh",
   "disabled": "Input-module_disabled__CJeOi",
   "reversed": "Input-module_reversed__Kh7dc",
-  "focusRing": "Input-module_focusRing__E68jh",
   "withStartIconAdornment": "Input-module_withStartIconAdornment__de6-U",
   "startIconAdornment": "Input-module_startIconAdornment__pnn-b",
   "withDisabled": "Input-module_withDisabled__pzzCm",
@@ -14,6 +13,7 @@ var styles = {
   "endIconAdornment": "Input-module_endIconAdornment__bg-PL",
   "withReversed": "Input-module_withReversed__SKSOD",
   "default": "Input-module_default__zata3",
+  "focusRing": "Input-module_focusRing__E68jh",
   "error": "Input-module_error__a-BFh",
   "caution": "Input-module_caution__rC0sY"
 };

package/dist/cjs/Input/InputSearch/InputSearch.cjs

@@ -63,9 +63,7 @@ var InputSearch = function (props) {
     value: value,
     onChange: onChange,
     readOnly: onChange === undefined
-  }, restProps)), React__default.default.createElement("div", {
-    className: InputSearch_module.focusRing
-  }), value && React__default.default.createElement(ClearButton.ClearButton, {
+  }, restProps)), value && React__default.default.createElement(ClearButton.ClearButton, {
     isReversed: reversed,
     onClick: handleOnClear,
     disabled: disabled,

package/dist/cjs/Input/InputSearch/InputSearch.module.scss.cjs

@@ -4,7 +4,6 @@ var styles = {
   "wrapper": "InputSearch-module_wrapper__xz4kh",
   "input": "InputSearch-module_input__hCit3",
   "hasEndIconAdornment": "InputSearch-module_hasEndIconAdornment__ZtGcu",
-  "focusRing": "InputSearch-module_focusRing__kDUuP",
   "startIconAdornment": "InputSearch-module_startIconAdornment__Tc7Yx",
   "loadingSpinner": "InputSearch-module_loadingSpinner__GIO1C",
   "endIconAdornment": "InputSearch-module_endIconAdornment__lm-3h",

package/dist/esm/Input/Input/Input.mjs

@@ -29,9 +29,7 @@ const Input = /*#__PURE__*/function () {
       defaultValue: defaultValue,
       disabled: disabled,
       className: classnames(styles.input, styles[status], classNameOverride, reversed ? styles.reversed : styles.default, disabled && styles.disabled)
-    }, restProps)), /*#__PURE__*/React.createElement("div", {
-      className: styles.focusRing
-    }), endIconAdornment && /*#__PURE__*/React.createElement("div", {
+    }, restProps)), endIconAdornment && /*#__PURE__*/React.createElement("div", {
       className: styles.endIconAdornment
     }, endIconAdornment));
   };

package/dist/esm/Input/Input/Input.module.scss.mjs

@@ -4,7 +4,6 @@ var styles = {
   "input": "Input-module_input__d-Moh",
   "disabled": "Input-module_disabled__CJeOi",
   "reversed": "Input-module_reversed__Kh7dc",
-  "focusRing": "Input-module_focusRing__E68jh",
   "withStartIconAdornment": "Input-module_withStartIconAdornment__de6-U",
   "startIconAdornment": "Input-module_startIconAdornment__pnn-b",
   "withDisabled": "Input-module_withDisabled__pzzCm",
@@ -12,6 +11,7 @@ var styles = {
   "endIconAdornment": "Input-module_endIconAdornment__bg-PL",
   "withReversed": "Input-module_withReversed__SKSOD",
   "default": "Input-module_default__zata3",
+  "focusRing": "Input-module_focusRing__E68jh",
   "error": "Input-module_error__a-BFh",
   "caution": "Input-module_caution__rC0sY"
 };

package/dist/esm/Input/InputSearch/InputSearch.mjs

@@ -55,9 +55,7 @@ const InputSearch = /*#__PURE__*/function () {
       value: value,
       onChange: onChange,
       readOnly: onChange === undefined
-    }, restProps)), /*#__PURE__*/React.createElement("div", {
-      className: styles.focusRing
-    }), value && (/*#__PURE__*/React.createElement(ClearButton, {
+    }, restProps)), value && (/*#__PURE__*/React.createElement(ClearButton, {
       isReversed: reversed,
       onClick: handleOnClear,
       disabled: disabled,

package/dist/esm/Input/InputSearch/InputSearch.module.scss.mjs

@@ -2,7 +2,6 @@ var styles = {
   "wrapper": "InputSearch-module_wrapper__xz4kh",
   "input": "InputSearch-module_input__hCit3",
   "hasEndIconAdornment": "InputSearch-module_hasEndIconAdornment__ZtGcu",
-  "focusRing": "InputSearch-module_focusRing__kDUuP",
   "startIconAdornment": "InputSearch-module_startIconAdornment__Tc7Yx",
   "loadingSpinner": "InputSearch-module_loadingSpinner__GIO1C",
   "endIconAdornment": "InputSearch-module_endIconAdornment__lm-3h",

package/dist/styles.css

@@ -2024,6 +2024,8 @@
 .Checkbox-module_checkbox__qJnwV:focus + .Checkbox-module_box__Q6BJn {
   background: white;
   border-color: var(--color-gray-600, #524e56);
+  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) var(--color-blue-500);
+  outline-offset: 1px;
 }
 .Checkbox-module_checkbox__qJnwV:checked:focus + .Checkbox-module_box__Q6BJn, .Checkbox-module_checkbox__qJnwV:indeterminate:focus + .Checkbox-module_box__Q6BJn {
   background: var(--color-gray-600, #524e56);
@@ -2033,20 +2035,6 @@
   background: var(--color-gray-600, #524e56);
   border-color: var(--color-gray-600, #524e56);
 }
-.Checkbox-module_checkbox__qJnwV:focus + .Checkbox-module_box__Q6BJn::after {
-  content: "";
-  box-sizing: border-box;
-  position: absolute;
-  background: transparent;
-  border-radius: var(--border-focus-ring-border-radius, 10px);
-  border-width: var(--border-focus-ring-border-width, 2px);
-  border-style: var(--border-focus-ring-border-style, solid);
-  border-color: var(--color-blue-500, #0168b3);
-  top: calc(-2px - 24px / 8);
-  left: calc(-2px - 24px / 8);
-  width: calc(24px + 2px + var(--border-solid-border-width, 2px) * 2);
-  height: calc(24px + 2px + var(--border-solid-border-width, 2px) * 2);
-}
 
 .Checkbox-module_box__Q6BJn.Checkbox-module_reversed__YWdUf {
   border: var(--border-solid-border-width, 2px) var(--border-solid-border-style, solid) rgba(var(--color-white-rgb, 255, 255, 255), 0.65);
@@ -2055,6 +2043,9 @@
 .Checkbox-module_checkbox__qJnwV:checked + .Checkbox-module_box__Q6BJn.Checkbox-module_reversed__YWdUf, .Checkbox-module_checkbox__qJnwV:indeterminate + .Checkbox-module_box__Q6BJn.Checkbox-module_reversed__YWdUf {
   background: rgba(var(--color-white-rgb, 255, 255, 255), 0.65);
 }
+.Checkbox-module_checkbox__qJnwV:focus + .Checkbox-module_box__Q6BJn.Checkbox-module_reversed__YWdUf {
+  outline-color: var(--color-blue-300);
+}
 .Checkbox-module_checkbox__qJnwV:not([checked]):hover + .Checkbox-module_box__Q6BJn.Checkbox-module_reversed__YWdUf, .Checkbox-module_checkbox__qJnwV:not([checked]):focus + .Checkbox-module_box__Q6BJn.Checkbox-module_reversed__YWdUf {
   border-color: var(--color-white, #ffffff);
   background: rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
@@ -2067,9 +2058,6 @@
   background: var(--color-white, #ffffff);
   border-color: var(--color-white, #ffffff);
 }
-.Checkbox-module_checkbox__qJnwV:focus + .Checkbox-module_box__Q6BJn.Checkbox-module_reversed__YWdUf::after {
-  border-color: var(--color-blue-300, #73c0e8);
-}
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -2210,21 +2198,14 @@
   border: none;
   position: relative;
   display: inline-flex;
+  border-radius: 100%;
 }
 .ClearButton-module_clearButton__CSOIc:hover {
   cursor: pointer;
 }
-.ClearButton-module_clearButton__CSOIc:focus {
-  outline: none;
-}
-.ClearButton-module_clearButton__CSOIc:focus-visible::after {
-  content: "";
-  position: absolute;
-  background: transparent;
-  border-width: var(--border-focus-ring-border-width, 2px);
-  border-style: var(--border-focus-ring-border-style, solid);
-  border-radius: 50%;
-  inset: -1px;
+.ClearButton-module_clearButton__CSOIc:focus-visible {
+  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) var(--color-blue-500);
+  outline-offset: -1px;
 }
 
 .ClearButton-module_default__lBJxw {
@@ -2233,9 +2214,6 @@
 .ClearButton-module_default__lBJxw:hover, .ClearButton-module_default__lBJxw:focus-visible {
   color: var(--color-purple-800, #2f2438);
 }
-.ClearButton-module_default__lBJxw:focus-visible::after {
-  border-color: var(--color-blue-500, #0168b3);
-}
 
 .ClearButton-module_reversed__0I2DC {
   color: rgba(var(--color-white-rgb, 255, 255, 255), 0.8);
@@ -2243,8 +2221,8 @@
 .ClearButton-module_reversed__0I2DC:hover, .ClearButton-module_reversed__0I2DC:focus-visible {
   color: var(--color-white, #ffffff);
 }
-.ClearButton-module_reversed__0I2DC:focus-visible::after {
-  border-color: var(--color-blue-300, #73c0e8);
+.ClearButton-module_reversed__0I2DC:focus-visible {
+  outline-color: var(--color-blue-300);
 }
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -2454,6 +2432,10 @@
   position: static;
   opacity: 100%;
 }
+.Input-module_input__d-Moh:focus:not([disabled]), .Input-module_input__d-Moh:hover:focus:not([disabled]) {
+  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) var(--color-blue-500);
+  outline-offset: 1px;
+}
 .Input-module_input__d-Moh:focus:not([disabled])::placeholder, .Input-module_input__d-Moh:hover:focus:not([disabled])::placeholder {
   font-family: var(--typography-paragraph-body-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
   font-size: var(--typography-paragraph-body-font-size, 1rem);
@@ -2476,17 +2458,6 @@
   color: rgba(var(--color-purple-800-rgb, 47, 36, 56), 0.3);
 }
 
-.Input-module_input__d-Moh:focus + .Input-module_focusRing__E68jh {
-  position: absolute;
-  background: transparent;
-  border-radius: var(--border-focus-ring-border-radius, 10px);
-  border-width: var(--border-focus-ring-border-width, 2px);
-  border-style: var(--border-focus-ring-border-style, solid);
-  border-color: transparent;
-  inset: -3px;
-  pointer-events: none;
-}
-
 /* stylelint-disable no-descending-specificity */
 .Input-module_withStartIconAdornment__de6-U .Input-module_startIconAdornment__pnn-b {
   position: absolute;
@@ -2639,8 +2610,8 @@
 .Input-module_input__d-Moh.Input-module_reversed__Kh7dc:focus:not([disabled]), .Input-module_input__d-Moh.Input-module_reversed__Kh7dc:hover:not([disabled]), .Input-module_input__d-Moh.Input-module_reversed__Kh7dc:hover:focus:not([disabled]) {
   background: rgba(var(--color-white-rgb, 255, 255, 255), 0.1);
 }
-.Input-module_input__d-Moh.Input-module_reversed__Kh7dc:focus + .Input-module_focusRing__E68jh {
-  border-color: var(--color-blue-300, #73c0e8);
+.Input-module_input__d-Moh.Input-module_reversed__Kh7dc:focus {
+  outline-color: var(--color-blue-300);
 }
 .Input-module_input__d-Moh.Input-module_reversed__Kh7dc:not(.Input-module_error__a-BFh, .Input-module_caution__rC0sY) {
   border-color: rgba(var(--color-white-rgb, 255, 255, 255), 0.65);
@@ -2896,15 +2867,9 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   position: static;
   opacity: 0%;
 }
-
-.InputSearch-module_input__hCit3[type=search]:focus + .InputSearch-module_focusRing__kDUuP {
-  position: absolute;
-  background: transparent;
-  border-radius: 48px;
-  border-width: var(--border-focus-ring-border-width, 2px);
-  border-style: var(--border-focus-ring-border-style, solid);
-  inset: -3px;
-  pointer-events: none;
+.InputSearch-module_input__hCit3[type=search]:focus {
+  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) var(--color-blue-500);
+  outline-offset: 1px;
 }
 
 .InputSearch-module_startIconAdornment__Tc7Yx {
@@ -2950,9 +2915,6 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   color: var(--color-purple-800, #2f2438);
   opacity: 0.7;
 }
-.InputSearch-module_default__4d3Ek .InputSearch-module_focusRing__kDUuP {
-  border-color: var(--color-blue-500, #0168b3);
-}
 .InputSearch-module_default__4d3Ek .InputSearch-module_startIconAdornment__Tc7Yx {
   color: var(--color-purple-800, #2f2438);
   opacity: 0.7;
@@ -2989,9 +2951,6 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   color: var(--color-purple-800, #2f2438);
   opacity: 0.7;
 }
-.InputSearch-module_secondary__l68uD .InputSearch-module_focusRing__kDUuP {
-  border-color: var(--color-blue-500, #0168b3);
-}
 .InputSearch-module_secondary__l68uD .InputSearch-module_startIconAdornment__Tc7Yx {
   color: var(--color-purple-800, #2f2438);
   opacity: 0.7;
@@ -3027,8 +2986,8 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   color: var(--color-white, #ffffff);
   opacity: 0.8;
 }
-.InputSearch-module_reversed__eS7Nr .InputSearch-module_focusRing__kDUuP {
-  border-color: var(--color-blue-300, #73c0e8);
+.InputSearch-module_reversed__eS7Nr .InputSearch-module_input__hCit3[type=search]:focus {
+  outline-color: var(--color-blue-300);
 }
 .InputSearch-module_reversed__eS7Nr .InputSearch-module_startIconAdornment__Tc7Yx {
   color: var(--color-white, #ffffff);
@@ -4021,15 +3980,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 .Option-module_option__q837b.Option-module_isFocusVisible__gIulJ {
   background-color: var(--color-blue-100, #e6f6ff);
   color: var(--color-blue-500, #0168b3);
-}
-.Option-module_option__q837b.Option-module_isFocusVisible__gIulJ::after {
-  content: "";
-  position: absolute;
-  background: transparent;
-  border: var(--border-focus-ring-border-width, 2px) var(--border-focus-ring-border-style, solid) var(--color-blue-500, #0168b3);
-  border-radius: 4px;
-  inset: calc(-1 * calc(var(--border-focus-ring-border-width, 2px) * 2 + 1px));
-  z-index: 1;
+  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) var(--color-blue-500);
 }
 .Option-module_option__q837b.Option-module_isFocusVisible__gIulJ .Option-module_icon__6dMZa {
   color: var(--color-blue-500, #0168b3);
@@ -4135,18 +4086,11 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   border-color: var(--color-gray-600, #524e56);
 }
 .SelectToggle-module_selectToggle__WzOfT:focus {
-  outline: none;
+  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) var(--color-blue-500);
+  outline-offset: 1px;
   background-color: var(--color-gray-200, #f4f4f5);
   border-color: var(--color-gray-600, #524e56);
 }
-.SelectToggle-module_selectToggle__WzOfT:focus::after {
-  content: "";
-  position: absolute;
-  background: transparent;
-  border: var(--border-focus-ring-border-width, 2px) var(--border-focus-ring-border-style, solid) var(--color-blue-500, #0168b3);
-  border-radius: var(--border-focus-ring-border-radius, 10px);
-  inset: calc(-1 * calc(var(--border-focus-ring-border-width, 2px) * 2 + 1px));
-}
 
 .SelectToggle-module_placeholder__MqhPo {
   color: rgba(var(--color-purple-800-rgb, 47, 36, 56), 0.7);
@@ -4185,8 +4129,8 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 .SelectToggle-module_reversed__4b0JA:active .SelectToggle-module_icon__MX9x-, .SelectToggle-module_reversed__4b0JA:hover .SelectToggle-module_icon__MX9x-, .SelectToggle-module_reversed__4b0JA:focus .SelectToggle-module_icon__MX9x- {
   color: var(--color-white, #ffffff);
 }
-.SelectToggle-module_reversed__4b0JA:focus::after {
-  border-color: var(--color-blue-300, #73c0e8);
+.SelectToggle-module_reversed__4b0JA:focus {
+  outline-color: var(--color-blue-300);
 }
 .SelectToggle-module_reversed__4b0JA .SelectToggle-module_error__2j0Yb {
   border-color: var(--color-red-300, #f597a8);
@@ -4976,20 +4920,11 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: var(--border-solid-border-radius);
 }
-.GenericNotification-module_cancel__c6wky:focus, .GenericNotification-module_cancel__c6wky:focus-visible {
-  outline: none;
-}
-.GenericNotification-module_cancel__c6wky:focus-visible::after {
-  content: "";
-  pointer-events: none;
-  position: absolute;
-  background: transparent;
-  border-radius: var(--border-focus-ring-border-radius, 10px);
-  border-width: var(--border-focus-ring-border-width, 2px);
-  border-style: var(--border-focus-ring-border-style, solid);
-  border-color: var(--color-blue-500, #0168b3);
-  inset: var(--spacing-2);
+.GenericNotification-module_cancel__c6wky:focus-visible {
+  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) var(--color-blue-500);
+  outline-offset: -4px;
 }
 
 .GenericNotification-module_notificationTitle__Oaqb8 {
@@ -5123,15 +5058,10 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
     --button-text-color: var(--color-white);
   }
 
-  &[data-focus-visible]::after {
-    content: '';
-    position: absolute;
-    background: transparent;
-    border-color: var(--color-blue-500);
-    border-radius: var(--border-focus-ring-border-radius);
-    border-width: var(--border-focus-ring-border-width);
-    border-style: var(--border-focus-ring-border-style);
-    inset: calc(-1 * (var(--border-focus-ring-border-width) * 2) - 1px);
+  &[data-focus-visible] {
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: 1px;
   }
 }
 
@@ -5234,8 +5164,8 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 .Button-module_primaryReversed__Sa4YW,
 .Button-module_secondaryReversed__u3qHz,
 .Button-module_tertiaryReversed__zn3XE {
-  &[data-focus-visible]::after {
-    border-color: var(--color-blue-300);
+  &[data-focus-visible] {
+    outline-color: var(--color-blue-300);
   }
 }
 
@@ -5531,17 +5461,8 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   color: rgba(var(--color-purple-800-rgb, 47, 36, 56), 0.7);
 }
 .RemoveButton-module_removeButton__C5eDJ:focus, .RemoveButton-module_removeButton__C5eDJ:focus-visible {
-  outline: none;
-}
-.RemoveButton-module_removeButton__C5eDJ:focus::after, .RemoveButton-module_removeButton__C5eDJ:focus-visible::after {
-  border-color: var(--color-blue-500, #0168b3);
-  content: "";
-  position: absolute;
-  background: transparent;
-  border-width: var(--border-focus-ring-border-width, 2px);
-  border-style: var(--border-focus-ring-border-style, solid);
-  border-radius: 50%;
-  inset: -3px;
+  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) var(--color-blue-500);
+  outline-offset: 1px;
 }
 .RemoveButton-module_removeButton__C5eDJ::before {
   position: absolute;
@@ -5867,15 +5788,10 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   outline: 0;
 }
 
-.Link-module_link__8oxip[data-focus-visible]::after {
-  content: '';
-  position: absolute;
-  background: transparent;
-  border-color: var(--color-blue-500);
-  border-radius: 0;
-  border-width: var(--border-focus-ring-border-width);
-  border-style: var(--border-focus-ring-border-style);
-  inset: calc(-1 * (var(--border-focus-ring-border-width) * 2) - 1px);
+.Link-module_link__8oxip[data-focus-visible] {
+  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+    var(--color-blue-500);
+  outline-offset: 3px;
 }
 
 .Link-module_isUnderlined__qvbtS {
@@ -5951,8 +5867,8 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   --link-text-color: var(--color-white);
 }
 
-.Link-module_white__qQr6q[data-focus-visible]::after {
-  border-color: var(--color-blue-300);
+.Link-module_white__qQr6q[data-focus-visible] {
+  outline-color: var(--color-blue-300);
 }
 
 .Link-module_white__qQr6q.Link-module_isDisabled__gvLNv {
@@ -5963,8 +5879,8 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   --link-text-color: var(--color-white);
 }
 
-.Link-module_reversed__IqX8B[data-focus-visible]::after {
-  border-color: var(--color-blue-300);
+.Link-module_reversed__IqX8B[data-focus-visible] {
+  outline-color: var(--color-blue-300);
 }
 
 .Link-module_link__8oxip.Link-module_isDisabled__gvLNv {
@@ -6711,15 +6627,9 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
     width: 100%;
   }
 }
-.ConfirmationModal-module_modal__k3pXu:has([class*="modalLabel"]:focus-visible)::after {
-  content: "";
-  position: absolute;
-  background: transparent;
-  border-radius: var(--border-focus-ring-border-radius, 10px);
-  border-width: var(--border-focus-ring-border-width, 2px);
-  border-style: var(--border-focus-ring-border-style, solid);
-  border-color: var(--color-blue-300, #73c0e8);
-  inset: -4px;
+.ConfirmationModal-module_modal__k3pXu:has([class*="modalLabel"]:focus-visible) {
+  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) var(--color-blue-300);
+  outline-offset: 2px;
 }
 
 .ConfirmationModal-module_animatingEnter__4W4xh {
@@ -7066,15 +6976,9 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
     width: 100%;
   }
 }
-.ContextModal-module_modal__wriV7:has([class*="modalLabel"]:focus-visible)::after {
-  content: "";
-  position: absolute;
-  background: transparent;
-  border-radius: var(--border-focus-ring-border-radius, 10px);
-  border-width: var(--border-focus-ring-border-width, 2px);
-  border-style: var(--border-focus-ring-border-style, solid);
-  border-color: var(--color-blue-300, #73c0e8);
-  inset: -4px;
+.ContextModal-module_modal__wriV7:has([class*="modalLabel"]:focus-visible) {
+  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) var(--color-blue-300);
+  outline-offset: 2px;
 }
 
 .ContextModal-module_animatingEnter__53BlF {
@@ -7389,15 +7293,9 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
     width: 100%;
   }
 }
-.InputEditModal-module_modal__SbQqp:has([class*="modalLabel"]:focus-visible)::after {
-  content: "";
-  position: absolute;
-  background: transparent;
-  border-radius: var(--border-focus-ring-border-radius, 10px);
-  border-width: var(--border-focus-ring-border-width, 2px);
-  border-style: var(--border-focus-ring-border-style, solid);
-  border-color: var(--color-blue-300, #73c0e8);
-  inset: -4px;
+.InputEditModal-module_modal__SbQqp:has([class*="modalLabel"]:focus-visible) {
+  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) var(--color-blue-300);
+  outline-offset: 2px;
 }
 
 .InputEditModal-module_animatingEnter__qZgX2 {
@@ -8223,21 +8121,8 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 }
 .Radio-module_radioInput__-zPUZ:focus:not([disabled]) + .Radio-module_box__nEGD7 {
   border-color: var(--color-gray-600, #524e56);
-}
-.Radio-module_radioInput__-zPUZ:focus:not([disabled]) + .Radio-module_box__nEGD7::after {
-  pointer-events: none;
-  content: "";
-  box-sizing: border-box;
-  position: absolute;
-  background: transparent;
-  border-radius: 26px;
-  border-width: var(--border-focus-ring-border-width, 2px);
-  border-style: var(--border-focus-ring-border-style, solid);
-  border-color: var(--color-blue-500, #0168b3);
-  top: calc(-2px - 24px / 8);
-  left: calc(-2px - 24px / 8);
-  width: calc(24px + 2px + var(--border-solid-border-width, 2px) * 2);
-  height: calc(24px + 2px + var(--border-solid-border-width, 2px) * 2);
+  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) var(--color-blue-500);
+  outline-offset: 1px;
 }
 .Radio-module_radioInput__-zPUZ:not([disabled]) + .Radio-module_box__nEGD7:hover {
   border-color: var(--color-gray-600, #524e56);
@@ -8249,9 +8134,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 }
 .Radio-module_radioInput__-zPUZ:focus:not([disabled]) + .Radio-module_box__nEGD7.Radio-module_reversed__pfCrF {
   border-color: var(--color-white, #ffffff);
-}
-.Radio-module_radioInput__-zPUZ:focus:not([disabled]) + .Radio-module_box__nEGD7.Radio-module_reversed__pfCrF::after {
-  border-color: var(--color-blue-300, #73c0e8);
+  outline-color: var(--color-blue-300, #73c0e8);
 }
 .Radio-module_radioInput__-zPUZ:not([disabled]) + .Radio-module_box__nEGD7.Radio-module_reversed__pfCrF:hover {
   border-color: var(--color-white, #ffffff);

package/locales/de.json

@@ -63,11 +63,11 @@
   },
   "filterMultiSelectClearButton.label" : {
     "description" : "Clear button label for filter multi-select",
-    "message" : "Clear<VisuallyHidden> selections</VisuallyHidden>"
+    "message" : "<VisuallyHidden>Auswahlen</VisuallyHidden> löschen"
   },
   "filterMultiSelectMultiSelectOption.available" : {
     "description" : "Number of filter items available",
-    "message" : "<Badge>{count}</Badge><VisuallyHidden> available</VisuallyHidden>"
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> verfügbar</VisuallyHidden>"
   },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
@@ -91,7 +91,7 @@
   },
   "kzErrorPage.400.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Problem beim Laden der Seite. Versuchen Sie es noch einmal oder gehen Sie zur Startseite."
+    "message" : "Problem beim Laden der Seite. Versuche es erneut oder gehe zur Startseite."
   },
   "kzErrorPage.400.title" : {
     "description" : "Heading for page",
@@ -186,6 +186,6 @@
   },
   "splitButton.dropdownButton.label" : {
     "description" : "Label for a dropdown menu holding additional actions",
-    "message" : "Zusätzliche Aktionen"
+    "message" : "Zusätzliche Maßnahmen"
   }
 }

package/locales/id.json

@@ -63,11 +63,11 @@
   },
   "filterMultiSelectClearButton.label" : {
     "description" : "Clear button label for filter multi-select",
-    "message" : "Clear<VisuallyHidden> selections</VisuallyHidden>"
+    "message" : "Hapus<VisuallyHidden> pilihan</VisuallyHidden>"
   },
   "filterMultiSelectMultiSelectOption.available" : {
     "description" : "Number of filter items available",
-    "message" : "<Badge>{count}</Badge><VisuallyHidden> available</VisuallyHidden>"
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> tersedia</VisuallyHidden>"
   },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",
@@ -79,7 +79,7 @@
   },
   "filterMultiSelectSelectAllButton.label" : {
     "description" : "Select all button in filter multi select",
-    "message" : "Pilih Semua"
+    "message" : "Pilih semua"
   },
   "inputSearch.clear" : {
     "description" : "Label for the clear search button",

package/locales/mi.json

@@ -63,11 +63,11 @@
   },
   "filterMultiSelectClearButton.label" : {
     "description" : "Clear button label for filter multi-select",
-    "message" : "Clear<VisuallyHidden> selections</VisuallyHidden>"
+    "message" : "Maamaa<VisuallyHidden> kowhiringa</VisuallyHidden>"
   },
   "filterMultiSelectMultiSelectOption.available" : {
     "description" : "Number of filter items available",
-    "message" : "<Badge>{count}</Badge><VisuallyHidden> available</VisuallyHidden>"
+    "message" : "<Badge>{count}</Badge><VisuallyHidden> e wātea ana</VisuallyHidden>"
   },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",

package/locales/zh-TW.json

@@ -67,7 +67,7 @@
   },
   "filterMultiSelectMultiSelectOption.available" : {
     "description" : "Number of filter items available",
-    "message" : "<Badge>{count}</Badge><VisuallyHidden> available</VisuallyHidden>"
+    "message" : "<VisuallyHidden>現有 <Badge>{count}</Badge> 項</VisuallyHidden>"
   },
   "filterMultiSelectSearchInput.label" : {
     "description" : "Label for the search input",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.74.1",
+  "version": "1.74.3",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -178,8 +178,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-highlight": "^0.15.0",
-    "react-intl": "^7.1.6",
-    "rollup": "^4.36.0",
+    "react-intl": "^7.1.10",
+    "rollup": "^4.38.0",
     "sass": "1.79.6",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.3.2",

package/src/Checkbox/Checkbox/Checkbox.module.scss

@@ -57,6 +57,9 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
   .checkbox:focus + & {
     background: white;
     border-color: $dt-color-form-border-color-hover;
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: 1px;
   }
 
   .checkbox:checked:focus + &,
@@ -70,21 +73,6 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
     background: $dt-color-form-border-color-hover;
     border-color: $dt-color-form-border-color-hover;
   }
-
-  .checkbox:focus + &::after {
-    content: '';
-    box-sizing: border-box;
-    position: absolute;
-    background: transparent;
-    border-radius: $border-focus-ring-border-radius;
-    border-width: $border-focus-ring-border-width;
-    border-style: $border-focus-ring-border-style;
-    border-color: $dt-color-form-border-color-focus;
-    top: calc(-#{$focus-ring-offset} - calc(#{$checkbox-size} / 8));
-    left: calc(-#{$focus-ring-offset} - calc(#{$checkbox-size} / 8));
-    width: calc(#{$checkbox-size} + #{$focus-ring-offset} + #{$border-solid-border-width} * 2);
-    height: calc(#{$checkbox-size} + #{$focus-ring-offset} + #{$border-solid-border-width} * 2);
-  }
 }
 
 .box.reversed {
@@ -96,6 +84,10 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
     background: rgba($color-white-rgb, 0.65);
   }
 
+  .checkbox:focus + & {
+    outline-color: var(--color-blue-300);
+  }
+
   .checkbox:not([checked]):hover + &,
   .checkbox:not([checked]):focus + & {
     border-color: $color-white;
@@ -113,8 +105,4 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
     background: $color-white;
     border-color: $color-white;
   }
-
-  .checkbox:focus + &::after {
-    border-color: $dt-color-form-border-color-reversed-focus;
-  }
 }

package/src/ClearButton/ClearButton.module.scss

@@ -7,27 +7,16 @@
 
   position: relative;
   display: inline-flex;
+  border-radius: 100%;
 
   &:hover {
     cursor: pointer;
   }
 
-  &:focus {
-    outline: none;
-  }
-
   &:focus-visible {
-    &::after {
-      $focus-ring-offset: -1px;
-
-      content: '';
-      position: absolute;
-      background: transparent;
-      border-width: $border-focus-ring-border-width;
-      border-style: $border-focus-ring-border-style;
-      border-radius: 50%;
-      inset: $focus-ring-offset;
-    }
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: -1px;
   }
 }
 
@@ -38,12 +27,6 @@
   &:focus-visible {
     color: $color-purple-800;
   }
-
-  &:focus-visible {
-    &::after {
-      border-color: $color-blue-500;
-    }
-  }
 }
 
 .reversed {
@@ -55,8 +38,6 @@
   }
 
   &:focus-visible {
-    &::after {
-      border-color: $color-blue-300;
-    }
+    outline-color: var(--color-blue-300);
   }
 }

package/src/Input/Input/Input.module.scss

@@ -50,6 +50,10 @@ $input-with-icon-padding: calc(#{$input-icon-size} + calc(#{$spacing-md} * 0.75)
 
   &:focus:not([disabled]),
   &:hover:focus:not([disabled]) {
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: 1px;
+
     @include form-input-placeholder {
       opacity: 0%;
     }
@@ -66,19 +70,6 @@ $input-with-icon-padding: calc(#{$input-icon-size} + calc(#{$spacing-md} * 0.75)
   }
 }
 
-.input:focus + .focusRing {
-  $focus-ring-offset: 3px;
-
-  position: absolute;
-  background: transparent;
-  border-radius: $border-focus-ring-border-radius;
-  border-width: $border-focus-ring-border-width;
-  border-style: $border-focus-ring-border-style;
-  border-color: transparent;
-  inset: -$focus-ring-offset;
-  pointer-events: none;
-}
-
 /* stylelint-disable no-descending-specificity */
 ///////////////////////////////////////////////////
 // ICON ADORNMENT STYLES
@@ -278,8 +269,8 @@ $input-with-icon-padding: calc(#{$input-icon-size} + calc(#{$spacing-md} * 0.75)
     background: rgba($color-white-rgb, 0.1);
   }
 
-  &:focus + .focusRing {
-    border-color: $color-blue-300;
+  &:focus {
+    outline-color: var(--color-blue-300);
   }
 
   &:not(.error, .caution) {

package/src/Input/Input/Input.tsx

@@ -62,10 +62,6 @@ export const Input = ({
       {...restProps}
     />
 
-    {/* Inputs aren't able to have pseudo elements like ::after on them,
-          so we have to create an element ourselves for the focus ring */}
-    <div className={styles.focusRing} />
-
     {endIconAdornment && <div className={styles.endIconAdornment}>{endIconAdornment}</div>}
   </div>
 )

package/src/Input/InputSearch/InputSearch.module.scss

@@ -60,19 +60,11 @@ $classname--input: '.input[type="search"]';
       opacity: 0%;
     }
   }
-}
 
-.focusRing {
-  #{$classname--input}:focus + & {
-    $focus-ring-offset: 3px;
-
-    position: absolute;
-    background: transparent;
-    border-radius: $border-solid-border-radius-curved;
-    border-width: $border-focus-ring-border-width;
-    border-style: $border-focus-ring-border-style;
-    inset: -$focus-ring-offset;
-    pointer-events: none;
+  &:focus {
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: 1px;
   }
 }
 
@@ -123,10 +115,6 @@ $classname--input: '.input[type="search"]';
     }
   }
 
-  .focusRing {
-    border-color: $color-blue-500;
-  }
-
   .startIconAdornment {
     color: $color-purple-800;
     opacity: $start-icon-opacity--default;
@@ -162,10 +150,6 @@ $classname--input: '.input[type="search"]';
     }
   }
 
-  .focusRing {
-    border-color: $color-blue-500;
-  }
-
   .startIconAdornment {
     color: $color-purple-800;
     opacity: $start-icon-opacity--default;
@@ -198,10 +182,10 @@ $classname--input: '.input[type="search"]';
       color: $color-white;
       opacity: $input-placeholder-opacity--reversed;
     }
-  }
 
-  .focusRing {
-    border-color: $color-blue-300;
+    &:focus {
+      outline-color: var(--color-blue-300);
+    }
   }
 
   .startIconAdornment {

package/src/Input/InputSearch/InputSearch.tsx

@@ -75,9 +75,6 @@ export const InputSearch = (props: InputSearchProps): JSX.Element => {
         readOnly={onChange === undefined}
         {...restProps}
       />
-      {/* Inputs aren't able to have pseudo elements like ::after on them,
-          so we have to create an element ourselves for the focus ring */}
-      <div className={styles.focusRing} />
 
       {value && (
         <ClearButton

package/src/Link/Link.module.css

@@ -10,15 +10,10 @@
   outline: 0;
 }
 
-.link[data-focus-visible]::after {
-  content: '';
-  position: absolute;
-  background: transparent;
-  border-color: var(--color-blue-500);
-  border-radius: 0;
-  border-width: var(--border-focus-ring-border-width);
-  border-style: var(--border-focus-ring-border-style);
-  inset: calc(-1 * (var(--border-focus-ring-border-width) * 2) - 1px);
+.link[data-focus-visible] {
+  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+    var(--color-blue-500);
+  outline-offset: 3px;
 }
 
 .isUnderlined {
@@ -94,8 +89,8 @@
   --link-text-color: var(--color-white);
 }
 
-.white[data-focus-visible]::after {
-  border-color: var(--color-blue-300);
+.white[data-focus-visible] {
+  outline-color: var(--color-blue-300);
 }
 
 .white.isDisabled {
@@ -106,8 +101,8 @@
   --link-text-color: var(--color-white);
 }
 
-.reversed[data-focus-visible]::after {
-  border-color: var(--color-blue-300);
+.reversed[data-focus-visible] {
+  outline-color: var(--color-blue-300);
 }
 
 .link.isDisabled {

package/src/Modal/GenericModal/GenericModal.module.scss

@@ -56,17 +56,11 @@
   }
 
   // wrap the modal container with a focus ring when the title has focus
-  // don't copy this over on the rebuild
-  // rather than putting the focus on the title, put it on the role=dialog element itself
-  &:has(:global([class*='modalLabel']):focus-visible)::after {
-    content: '';
-    position: absolute;
-    background: transparent;
-    border-radius: $border-focus-ring-border-radius;
-    border-width: $border-focus-ring-border-width;
-    border-style: $border-focus-ring-border-style;
-    border-color: $color-blue-300;
-    inset: -4px;
+  // for the rebuild: rather than putting the focus on the title, put it on the role=dialog element itself
+  &:has(:global([class*='modalLabel']):focus-visible) {
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-300);
+    outline-offset: 2px;
   }
 }
 

package/src/Notification/subcomponents/GenericNotification/GenericNotification.module.scss

@@ -34,24 +34,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: var(--border-solid-border-radius);
 
-  &:focus,
   &:focus-visible {
-    outline: none;
-  }
-
-  &:focus-visible::after {
-    $focus-ring-offset: var(--spacing-2);
-
-    content: '';
-    pointer-events: none;
-    position: absolute;
-    background: transparent;
-    border-radius: $border-focus-ring-border-radius;
-    border-width: $border-focus-ring-border-width;
-    border-style: $border-focus-ring-border-style;
-    border-color: $color-blue-500;
-    inset: $focus-ring-offset;
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: -4px;
   }
 }
 

package/src/Radio/Radio/Radio.module.scss

@@ -52,22 +52,9 @@ $dt-color-radio-border-color-focus-reversed: $color-blue-300;
 
   .radioInput:focus:not([disabled]) + & {
     border-color: $dt-color-radio-disc-color-base;
-  }
-
-  .radioInput:focus:not([disabled]) + &::after {
-    pointer-events: none;
-    content: '';
-    box-sizing: border-box;
-    position: absolute;
-    background: transparent;
-    border-radius: $radio-size + $focus-ring-offset;
-    border-width: $border-focus-ring-border-width;
-    border-style: $border-focus-ring-border-style;
-    border-color: $dt-color-radio-border-color-focus;
-    top: calc(-#{$focus-ring-offset} - calc(#{$radio-size} / 8));
-    left: calc(-#{$focus-ring-offset} - calc(#{$radio-size} / 8));
-    width: calc(#{$radio-size} + #{$focus-ring-offset} + #{$border-solid-border-width} * 2);
-    height: calc(#{$radio-size} + #{$focus-ring-offset} + #{$border-solid-border-width} * 2);
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: 1px;
   }
 
   .radioInput:not([disabled]) + &:hover {
@@ -81,10 +68,7 @@ $dt-color-radio-border-color-focus-reversed: $color-blue-300;
 
     .radioInput:focus:not([disabled]) + & {
       border-color: $color-white;
-    }
-
-    .radioInput:focus:not([disabled]) + &::after {
-      border-color: $dt-color-radio-border-color-focus-reversed;
+      outline-color: $dt-color-radio-border-color-focus-reversed;
     }
 
     .radioInput:not([disabled]) + &:hover {

package/src/__next__/Button/Button.module.css

@@ -53,15 +53,10 @@
     --button-text-color: var(--color-white);
   }
 
-  &[data-focus-visible]::after {
-    content: '';
-    position: absolute;
-    background: transparent;
-    border-color: var(--color-blue-500);
-    border-radius: var(--border-focus-ring-border-radius);
-    border-width: var(--border-focus-ring-border-width);
-    border-style: var(--border-focus-ring-border-style);
-    inset: calc(-1 * (var(--border-focus-ring-border-width) * 2) - 1px);
+  &[data-focus-visible] {
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: 1px;
   }
 }
 
@@ -164,8 +159,8 @@
 .primaryReversed,
 .secondaryReversed,
 .tertiaryReversed {
-  &[data-focus-visible]::after {
-    border-color: var(--color-blue-300);
+  &[data-focus-visible] {
+    outline-color: var(--color-blue-300);
   }
 }
 

package/src/__next__/Icon/_docs/Icon.docs.module.css

@@ -9,9 +9,7 @@
   }
 }
 
-.interactiveIcon:focus::after {
-  position: absolute;
-  content: '';
-  border: var(--border-focus-ring-border-width) solid var(--color-blue-500);
-  inset: -2px;
+.interactiveIcon:focus {
+  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+    var(--color-blue-500);
 }

package/src/__next__/Select/subcomponents/Option/Option.module.scss

@@ -40,18 +40,8 @@ $iconAndBadgeHeight: $spacing-md;
   &.isFocusVisible {
     background-color: $color-blue-100;
     color: $color-blue-500;
-
-    &::after {
-      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
-
-      content: '';
-      position: absolute;
-      background: transparent;
-      border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
-      border-radius: 4px;
-      inset: calc(-1 * #{$focus-ring-offset});
-      z-index: 1; // show border when sibling option is hovered
-    }
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
 
     .icon {
       color: $color-blue-500;

package/src/__next__/Select/subcomponents/SelectToggle/SelectToggle.module.scss

@@ -54,20 +54,11 @@
   }
 
   &:focus {
-    outline: none;
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: 1px;
     background-color: $color-gray-200;
     border-color: $color-gray-600;
-
-    &::after {
-      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
-
-      content: '';
-      position: absolute;
-      background: transparent;
-      border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
-      border-radius: $border-focus-ring-border-radius;
-      inset: calc(-1 * #{$focus-ring-offset});
-    }
   }
 }
 
@@ -115,9 +106,7 @@
   }
 
   &:focus {
-    &::after {
-      border-color: $color-blue-300;
-    }
+    outline-color: var(--color-blue-300);
   }
 
   .error {

package/src/__next__/Tag/RemovableTag/subcomponents/RemoveButton.module.scss

@@ -12,20 +12,9 @@
 
   &:focus,
   &:focus-visible {
-    outline: none;
-
-    &::after {
-      $focus-ring-offset: -3px;
-
-      border-color: $color-blue-500;
-      content: '';
-      position: absolute;
-      background: transparent;
-      border-width: $border-focus-ring-border-width;
-      border-style: $border-focus-ring-border-style;
-      border-radius: 50%;
-      inset: $focus-ring-offset;
-    }
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: 1px;
   }
 
   &::before {