From f0e1c0e0b43f2fc036a3943447f034b6a46b312b Mon Sep 17 00:00:00 2001
From: Trevor Burnham <trevorburnham@gmail.com>
Date: Tue, 26 Aug 2025 13:09:32 -0400
Subject: [PATCH] perf: Replace use of :focus-visible shim

All targeted browsers now support :focus-visible. This commit removes
the use of the shim defined in @cloudscape-design/component-toolkit.
Once this change is merged, the shim can be removed.
---
 src/alert/styles.scss                                    | 3 +--
 src/anchor-navigation/styles.scss                        | 3 +--
 src/annotation-context/annotation/styles.scss            | 3 +--
 src/app-layout/drawer/styles.scss                        | 1 -
 src/app-layout/toggles/styles.scss                       | 3 +--
 .../toolbar/trigger-button/styles.scss                   | 1 -
 src/app-layout/visual-refresh/trigger-button.scss        | 3 +--
 src/breadcrumb-group/item/styles.scss                    | 3 +--
 src/breadcrumb-group/styles.scss                         | 3 +--
 src/button/styles.scss                                   | 3 +--
 src/calendar/styles.scss                                 | 5 ++---
 src/checkbox/styles.scss                                 | 1 -
 src/code-editor/ace-editor.scss                          | 5 ++---
 src/code-editor/pane.scss                                | 1 -
 src/code-editor/resizable-box/styles.scss                | 1 -
 src/code-editor/styles.scss                              | 3 +--
 src/date-picker/styles.scss                              | 3 +--
 src/date-range-picker/calendar/grids/styles.scss         | 5 ++---
 src/date-range-picker/styles.scss                        | 3 +--
 src/expandable-section/styles.scss                       | 9 ++++-----
 src/file-input/styles.scss                               | 3 +--
 src/file-token-group/styles.scss                         | 1 -
 src/flashbar/collapsible.scss                            | 3 +--
 src/flashbar/styles.scss                                 | 3 +--
 src/form-field/styles.scss                               | 1 -
 src/internal/components/abstract-switch/styles.scss      | 4 ++--
 src/internal/components/button-trigger/styles.scss       | 5 ++---
 src/internal/components/chart-legend/styles.scss         | 3 +--
 src/internal/components/drag-handle/styles.scss          | 3 +--
 src/internal/components/expand-toggle-button/styles.scss | 3 +--
 src/internal/components/menu-dropdown/styles.scss        | 3 +--
 src/internal/components/panel-resize-handle/styles.scss  | 3 +--
 src/internal/components/sortable-area/styles.scss        | 1 -
 src/internal/components/token-list/styles.scss           | 3 +--
 src/internal/styles/links.scss                           | 1 -
 src/link/styles.scss                                     | 3 +--
 src/pagination/styles.scss                               | 3 +--
 src/popover/styles.scss                                  | 3 +--
 src/prompt-input/styles.scss                             | 1 -
 src/property-filter/filtering-token/styles.scss          | 3 +--
 src/radio-group/styles.scss                              | 1 -
 src/segmented-control/segment.scss                       | 3 +--
 src/select/parts/styles.scss                             | 1 -
 src/side-navigation/styles.scss                          | 3 +--
 src/split-panel/styles.scss                              | 1 -
 src/table/body-cell/styles.scss                          | 5 ++---
 src/table/header-cell/styles.scss                        | 5 ++---
 src/table/resizer/styles.scss                            | 7 ++-----
 src/table/styles.scss                                    | 3 +--
 src/tabs/styles.scss                                     | 3 +--
 src/tabs/tab-header-bar.scss                             | 3 +--
 src/tag-editor/styles.scss                               | 3 +--
 src/toggle/styles.scss                                   | 1 -
 src/token-group/styles.scss                              | 3 +--
 src/top-navigation/styles.scss                           | 5 ++---
 src/tutorial-panel/components/tutorial-list/styles.scss  | 3 +--
 src/wizard/styles.scss                                   | 5 ++---
 57 files changed, 56 insertions(+), 114 deletions(-)

diff --git a/src/alert/styles.scss b/src/alert/styles.scss
index 77f3a651ef..af89689936 100644
--- a/src/alert/styles.scss
+++ b/src/alert/styles.scss
@@ -6,7 +6,6 @@
 @use 'sass:map';
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '../internal/styles/foundation' as foundation;
 
@@ -82,7 +81,7 @@
   &:focus {
     outline: none;
   }
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(
       $gutter: awsui.$space-button-focus-outline-gutter,
       $border-radius: var(#{custom-props.$alertFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
diff --git a/src/anchor-navigation/styles.scss b/src/anchor-navigation/styles.scss
index 68fcc8f0e0..45268222ff 100644
--- a/src/anchor-navigation/styles.scss
+++ b/src/anchor-navigation/styles.scss
@@ -4,7 +4,6 @@
 */
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../internal/styles/typography/constants.scss' as typography;
 
 $guide-line-width: 2px;
@@ -85,7 +84,7 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
     transition-property: all;
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.link-focus;
   }
 
diff --git a/src/annotation-context/annotation/styles.scss b/src/annotation-context/annotation/styles.scss
index f01587f5c8..1b5bb6b925 100644
--- a/src/annotation-context/annotation/styles.scss
+++ b/src/annotation-context/annotation/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/styles' as styles;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 @use './arrow';
@@ -66,7 +65,7 @@
     outline: none;
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(2px, awsui.$border-radius-control-circular-focus-ring);
   }
 
diff --git a/src/app-layout/drawer/styles.scss b/src/app-layout/drawer/styles.scss
index bbdd100366..7e2e4433ac 100644
--- a/src/app-layout/drawer/styles.scss
+++ b/src/app-layout/drawer/styles.scss
@@ -4,7 +4,6 @@
 */
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/styles' as styles;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../constants' as constants;
 
 .toggle {
diff --git a/src/app-layout/toggles/styles.scss b/src/app-layout/toggles/styles.scss
index 52482c2b31..ac76f9b96d 100644
--- a/src/app-layout/toggles/styles.scss
+++ b/src/app-layout/toggles/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/styles' as styles;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .toggle-button {
   cursor: pointer;
@@ -22,7 +21,7 @@
     outline: none;
     text-decoration: none;
   }
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(awsui.$space-button-inline-icon-focus-outline-gutter);
   }
 }
diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.scss b/src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.scss
index c11d6d7674..b53f842ca5 100644
--- a/src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../../../../internal/styles' as styles;
 @use '../../../../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .trigger {
   // reset native <button> tag styles
diff --git a/src/app-layout/visual-refresh/trigger-button.scss b/src/app-layout/visual-refresh/trigger-button.scss
index d96e7e573c..9d8bc0c46a 100644
--- a/src/app-layout/visual-refresh/trigger-button.scss
+++ b/src/app-layout/visual-refresh/trigger-button.scss
@@ -5,7 +5,6 @@
 
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @mixin trigger-selected-styles {
   background: awsui.$color-background-layout-toggle-selected-default;
@@ -69,7 +68,7 @@ handleSplitPanelMaxWidth function in the context.
   pointer-events: auto;
   position: relative;
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(3px);
   }
 
diff --git a/src/breadcrumb-group/item/styles.scss b/src/breadcrumb-group/item/styles.scss
index 576bfd3740..fdaf6f0f64 100644
--- a/src/breadcrumb-group/item/styles.scss
+++ b/src/breadcrumb-group/item/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .link:after {
   display: none;
@@ -32,7 +31,7 @@
       display: block;
     }
 
-    @include focus-visible.when-visible {
+    &:focus-visible {
       @include styles.link-focus;
     }
   }
diff --git a/src/breadcrumb-group/styles.scss b/src/breadcrumb-group/styles.scss
index 731263c7f7..7a73cd5b16 100644
--- a/src/breadcrumb-group/styles.scss
+++ b/src/breadcrumb-group/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .breadcrumb-group {
   @include styles.styles-reset;
@@ -86,7 +85,7 @@
   display: flex;
   gap: awsui.$space-xxs;
   max-inline-size: 100%;
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
   }
   &:hover {
diff --git a/src/button/styles.scss b/src/button/styles.scss
index 2875849457..35b2209102 100644
--- a/src/button/styles.scss
+++ b/src/button/styles.scss
@@ -8,7 +8,6 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles/foundation' as foundation;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use './constants' as constants;
 
 @mixin adjust-for-variant($variant) {
@@ -84,7 +83,7 @@
     text-decoration: none;
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(
       $gutter: awsui.$space-button-focus-outline-gutter,
       $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
diff --git a/src/calendar/styles.scss b/src/calendar/styles.scss
index b787a2ed5d..f92bdb02b7 100644
--- a/src/calendar/styles.scss
+++ b/src/calendar/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../internal/styles/index' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../internal/styles/typography/index' as typographyConstants;
 @use './motion';
 
@@ -152,7 +151,7 @@
 
     &:focus {
       outline: none;
-      @include focus-visible.when-visible {
+      &:focus-visible {
         @include styles.focus-highlight(
           awsui.$space-calendar-grid-focus-outline-gutter,
           awsui.$border-radius-calendar-day-focus-ring
@@ -169,7 +168,7 @@
       z-index: 2;
       font-weight: styles.$font-weight-bold;
       &:focus {
-        @include focus-visible.when-visible {
+        &:focus-visible {
           @include styles.focus-highlight(
             awsui.$space-calendar-grid-focus-outline-gutter,
             awsui.$border-radius-calendar-day-focus-ring,
diff --git a/src/checkbox/styles.scss b/src/checkbox/styles.scss
index e7fd0029d9..64cc9aa4ba 100644
--- a/src/checkbox/styles.scss
+++ b/src/checkbox/styles.scss
@@ -7,7 +7,6 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles/foundation' as foundation;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 $checkbox-size: awsui.$size-control;
 
diff --git a/src/code-editor/ace-editor.scss b/src/code-editor/ace-editor.scss
index ad3faf4340..83996de8c2 100644
--- a/src/code-editor/ace-editor.scss
+++ b/src/code-editor/ace-editor.scss
@@ -6,7 +6,6 @@
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 @use './background-inline-svg.scss' as utils;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 /* stylelint-disable selector-combinator-disallowed-list, @cloudscape-design/no-implicit-descendant */
 
@@ -74,7 +73,7 @@
   .ace_fold-widget,
   .ace_gutter_annotation {
     box-shadow: none;
-    @include focus-visible.when-visible {
+    &:focus-visible {
       @include styles.focus-highlight(-1px);
     }
   }
@@ -145,7 +144,7 @@
 
     .ace_fold-widget,
     .ace_gutter_annotation {
-      @include focus-visible.when-visible {
+      &:focus-visible {
         @include styles.focus-highlight(
           -2px,
           awsui.$border-radius-control-default-focus-ring,
diff --git a/src/code-editor/pane.scss b/src/code-editor/pane.scss
index ea8dcb5e39..2a706ce431 100644
--- a/src/code-editor/pane.scss
+++ b/src/code-editor/pane.scss
@@ -5,7 +5,6 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @mixin pane-row-border($border-color) {
   $border: awsui.$border-item-width solid $border-color;
diff --git a/src/code-editor/resizable-box/styles.scss b/src/code-editor/resizable-box/styles.scss
index 4de5259073..21a699fce4 100644
--- a/src/code-editor/resizable-box/styles.scss
+++ b/src/code-editor/resizable-box/styles.scss
@@ -5,7 +5,6 @@
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
 @use '../background-inline-svg.scss' as utils;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .resizable-box {
   position: relative;
diff --git a/src/code-editor/styles.scss b/src/code-editor/styles.scss
index c2b10fa85f..aaa4d1e2f6 100644
--- a/src/code-editor/styles.scss
+++ b/src/code-editor/styles.scss
@@ -6,7 +6,6 @@
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles/foundation' as foundation;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use './ace-editor';
 @use './pane';
 
@@ -163,7 +162,7 @@
     }
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(awsui.$space-code-editor-status-focus-outline-gutter);
   }
 
diff --git a/src/date-picker/styles.scss b/src/date-picker/styles.scss
index 918eb2f51d..c22741883b 100644
--- a/src/date-picker/styles.scss
+++ b/src/date-picker/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../internal/styles/index' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../internal/styles/typography/index' as typographyConstants;
 
 .root {
@@ -22,7 +21,7 @@
   &:focus {
     outline: none;
   }
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.container-focus(awsui.$border-radius-dropdown);
   }
 }
diff --git a/src/date-range-picker/calendar/grids/styles.scss b/src/date-range-picker/calendar/grids/styles.scss
index c2e3f7b7fe..89ffd6d8b4 100644
--- a/src/date-range-picker/calendar/grids/styles.scss
+++ b/src/date-range-picker/calendar/grids/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../../../internal/styles/index' as styles;
 @use '../../../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../../../calendar/calendar' as calendar;
 
 @mixin border-radius($horizontal, $vertical) {
@@ -72,7 +71,7 @@
     background-color: transparent;
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     z-index: 2;
     @include styles.focus-highlight(
       awsui.$space-calendar-grid-focus-outline-gutter,
@@ -162,7 +161,7 @@
   position: relative;
   z-index: 2;
   font-weight: styles.$font-weight-bold;
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(
       awsui.$space-calendar-grid-selected-focus-outline-gutter,
       awsui.$border-radius-calendar-day-focus-ring,
diff --git a/src/date-range-picker/styles.scss b/src/date-range-picker/styles.scss
index 20019b2a51..8398338ccc 100644
--- a/src/date-range-picker/styles.scss
+++ b/src/date-range-picker/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../internal/styles/index' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../internal/styles/typography/index' as typographyConstants;
 @use './motion';
 
@@ -149,7 +148,7 @@ $calendar-header-color: awsui.$color-text-body-default;
   &:focus {
     outline: none;
   }
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.container-focus(awsui.$border-radius-dropdown);
   }
 }
diff --git a/src/expandable-section/styles.scss b/src/expandable-section/styles.scss
index a88756f589..09326cac9e 100644
--- a/src/expandable-section/styles.scss
+++ b/src/expandable-section/styles.scss
@@ -4,7 +4,6 @@
 */
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../container/shared' as container;
 
 @use './motion';
@@ -145,7 +144,7 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
       padding-inline-start: calc(#{container.$header-padding-horizontal} + #{$icon-total-space-medium});
     }
 
-    @include focus-visible.when-visible {
+    &:focus-visible:focus-visible {
       // HACK: Remediate focus border
       padding-block: calc(#{awsui.$space-scaled-s} - #{awsui.$border-divider-section-width});
       padding-inline: calc(#{awsui.$space-l} - #{awsui.$border-divider-section-width});
@@ -180,7 +179,7 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
 
   &-button,
   &-container-button {
-    @include focus-visible.when-visible {
+    &:focus-visible {
       @include styles.focus-highlight(0px);
     }
   }
@@ -221,7 +220,7 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
         color: awsui.$color-text-expandable-section-hover;
       }
 
-      @include focus-visible.when-visible {
+      &:focus-visible {
         @include styles.focus-highlight(2px);
       }
     }
@@ -269,7 +268,7 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
     text-decoration: none;
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-element-without-border(awsui.$border-radius-control-default-focus-ring);
   }
 }
diff --git a/src/file-input/styles.scss b/src/file-input/styles.scss
index 4fd64c68a2..47ad6b0cd3 100644
--- a/src/file-input/styles.scss
+++ b/src/file-input/styles.scss
@@ -4,7 +4,6 @@
 */
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .root,
 .file-input {
@@ -16,7 +15,7 @@
 }
 
 .file-input-button {
-  @include focus-visible.when-visible-unfocused {
+  &:focus-visible {
     &.force-focus-outline {
       &-icon {
         @include styles.focus-highlight(
diff --git a/src/file-token-group/styles.scss b/src/file-token-group/styles.scss
index 785ecf68b5..df9bafd570 100644
--- a/src/file-token-group/styles.scss
+++ b/src/file-token-group/styles.scss
@@ -7,7 +7,6 @@
 @use '../internal/styles' as styles;
 @use './constants' as constants;
 @use '../token-group/mixins.scss' as mixins;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @mixin token-box-validation {
   border-inline-start-width: awsui.$border-invalid-width;
diff --git a/src/flashbar/collapsible.scss b/src/flashbar/collapsible.scss
index 4271b496b5..5d3f7b5649 100644
--- a/src/flashbar/collapsible.scss
+++ b/src/flashbar/collapsible.scss
@@ -4,7 +4,6 @@
 */
 @use 'sass:map';
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles/foundation' as foundation;
 @use '../internal/styles' as styles;
@@ -319,7 +318,7 @@ the grid layout will be:
       outline: none;
     }
 
-    @include focus-visible.when-visible {
+    &:focus-visible {
       @include styles.focus-highlight(
         $gutter: 0px,
         $border-radius: var(
diff --git a/src/flashbar/styles.scss b/src/flashbar/styles.scss
index 8aa46c6fc3..b2ba072331 100644
--- a/src/flashbar/styles.scss
+++ b/src/flashbar/styles.scss
@@ -3,7 +3,6 @@
  SPDX-License-Identifier: Apache-2.0
 */
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
 @use '../internal/styles/typography' as typography;
@@ -81,7 +80,7 @@
   &:focus {
     outline: none;
   }
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(
       $gutter: awsui.$space-button-focus-outline-gutter,
       $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
diff --git a/src/form-field/styles.scss b/src/form-field/styles.scss
index ea399b613a..dc86de397e 100644
--- a/src/form-field/styles.scss
+++ b/src/form-field/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @use './motion';
 
diff --git a/src/internal/components/abstract-switch/styles.scss b/src/internal/components/abstract-switch/styles.scss
index be96eda344..185be9f2ef 100644
--- a/src/internal/components/abstract-switch/styles.scss
+++ b/src/internal/components/abstract-switch/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .content,
 .description,
@@ -25,7 +24,7 @@
 }
 
 .native-input {
-  @include focus-visible.when-visible {
+  &:focus-visible {
     & + .outline {
       display: block;
     }
@@ -70,6 +69,7 @@
   /* stylelint-disable selector-max-type */
   & > input,
   & > svg,
+  /* stylelint-disable-next-line no-descending-specificity */
   & > .outline {
     position: absolute;
     inline-size: 100%;
diff --git a/src/internal/components/button-trigger/styles.scss b/src/internal/components/button-trigger/styles.scss
index 30f785e579..fd2f86178a 100644
--- a/src/internal/components/button-trigger/styles.scss
+++ b/src/internal/components/button-trigger/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../../../token-group/constants' as tokenGroup;
 
 @use './motion';
@@ -46,7 +45,7 @@ $padding-block-inner-filtering-token: 0px;
     block-size: 100%;
     min-block-size: unset;
 
-    @include focus-visible.when-visible {
+    &:focus-visible {
       @include styles.focus-highlight(awsui.$space-filtering-token-operation-select-focus-outline-gutter);
     }
   }
@@ -113,7 +112,7 @@ $padding-block-inner-filtering-token: 0px;
   }
 
   &:not(.in-filtering-token) {
-    @include focus-visible.when-visible {
+    &:focus-visible {
       @include styles.form-focus-element();
     }
 
diff --git a/src/internal/components/chart-legend/styles.scss b/src/internal/components/chart-legend/styles.scss
index 418b3112d5..746be98642 100644
--- a/src/internal/components/chart-legend/styles.scss
+++ b/src/internal/components/chart-legend/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use './motion';
 
 .root {
@@ -46,7 +45,7 @@
     outline: none;
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(2px);
   }
 
diff --git a/src/internal/components/drag-handle/styles.scss b/src/internal/components/drag-handle/styles.scss
index 06ed706dce..65ba6c0f79 100644
--- a/src/internal/components/drag-handle/styles.scss
+++ b/src/internal/components/drag-handle/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .handle {
   appearance: none;
@@ -62,7 +61,7 @@
     text-decoration: none;
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     &:not(.hide-focus) {
       @include styles.focus-highlight(0px);
     }
diff --git a/src/internal/components/expand-toggle-button/styles.scss b/src/internal/components/expand-toggle-button/styles.scss
index 3d1798e17a..1985599cb9 100644
--- a/src/internal/components/expand-toggle-button/styles.scss
+++ b/src/internal/components/expand-toggle-button/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../../../internal/styles/index' as styles;
 @use '../../../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @use './motion';
 
@@ -40,7 +39,7 @@
   outline: 0;
   color: awsui.$color-text-interactive-default;
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
   }
 
diff --git a/src/internal/components/menu-dropdown/styles.scss b/src/internal/components/menu-dropdown/styles.scss
index 3847f51065..92a782b946 100644
--- a/src/internal/components/menu-dropdown/styles.scss
+++ b/src/internal/components/menu-dropdown/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .button {
   @include styles.styles-reset;
@@ -59,7 +58,7 @@
     margin-inline-end: awsui.$space-xl;
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     // -1px because the button touches the edges of the top navigation.
     @include styles.focus-highlight(-1px);
   }
diff --git a/src/internal/components/panel-resize-handle/styles.scss b/src/internal/components/panel-resize-handle/styles.scss
index e4ebbdbef3..f18400f847 100644
--- a/src/internal/components/panel-resize-handle/styles.scss
+++ b/src/internal/components/panel-resize-handle/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .slider {
   padding-block: 0;
@@ -22,7 +21,7 @@
     outline: none;
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(0px);
   }
 }
diff --git a/src/internal/components/sortable-area/styles.scss b/src/internal/components/sortable-area/styles.scss
index 78c76a5bb4..db4c64d5c8 100644
--- a/src/internal/components/sortable-area/styles.scss
+++ b/src/internal/components/sortable-area/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @mixin animated {
   @include styles.with-motion {
diff --git a/src/internal/components/token-list/styles.scss b/src/internal/components/token-list/styles.scss
index 71650b2877..67e647746d 100644
--- a/src/internal/components/token-list/styles.scss
+++ b/src/internal/components/token-list/styles.scss
@@ -6,7 +6,6 @@
 @use '../../styles/tokens' as awsui;
 @use '../../styles' as styles;
 @use '../../../file-token-group/constants' as constants;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .root {
   gap: awsui.$space-scaled-xs;
@@ -94,7 +93,7 @@
     text-decoration-color: transparent;
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-element-without-border(awsui.$border-radius-control-default-focus-ring);
   }
 
diff --git a/src/internal/styles/links.scss b/src/internal/styles/links.scss
index 597a01ee4f..7d186d5753 100644
--- a/src/internal/styles/links.scss
+++ b/src/internal/styles/links.scss
@@ -8,7 +8,6 @@
 @use './motion' as styles;
 @use './typography/' as typography;
 @use './forms/' as mixins;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../../link/constants.scss' as constants;
 @use '../generated/custom-css-properties/index.scss' as custom-props;
 
diff --git a/src/link/styles.scss b/src/link/styles.scss
index 62a5e3da8a..1c8329d5b9 100644
--- a/src/link/styles.scss
+++ b/src/link/styles.scss
@@ -6,7 +6,6 @@
 @use 'sass:map';
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use './constants' as constants;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '../internal/styles/foundation' as foundation;
@@ -51,7 +50,7 @@
     }
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.link-focus(
       $border-color: var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused),
       $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
diff --git a/src/pagination/styles.scss b/src/pagination/styles.scss
index 31095a9be2..603823f325 100644
--- a/src/pagination/styles.scss
+++ b/src/pagination/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../internal/styles/index' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .root {
   @include styles.styles-reset;
@@ -40,7 +39,7 @@
     outline: none;
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-element-without-border(awsui.$border-radius-control-default-focus-ring);
   }
 
diff --git a/src/popover/styles.scss b/src/popover/styles.scss
index 21ee130cac..74b53bf7ed 100644
--- a/src/popover/styles.scss
+++ b/src/popover/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @use './arrow';
 @use './body';
@@ -77,7 +76,7 @@ $trigger-underline-offset: 0.25em;
     outline: none;
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(1px);
   }
 }
diff --git a/src/prompt-input/styles.scss b/src/prompt-input/styles.scss
index f87f82944e..debb91702d 100644
--- a/src/prompt-input/styles.scss
+++ b/src/prompt-input/styles.scss
@@ -8,7 +8,6 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles/foundation/' as foundation;
 @use '../internal/styles/forms/constants' as constants;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 $send-icon-right-spacing: awsui.$space-static-xxs;
 $invalid-border-offset: constants.$invalid-control-left-padding;
diff --git a/src/property-filter/filtering-token/styles.scss b/src/property-filter/filtering-token/styles.scss
index 17f1462ba6..11cf53e517 100644
--- a/src/property-filter/filtering-token/styles.scss
+++ b/src/property-filter/filtering-token/styles.scss
@@ -3,7 +3,6 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
 @use '../../token-group/constants' as constants;
@@ -118,7 +117,7 @@ $border-radius-inner-token: calc(#{awsui.$border-radius-token} / 2);
   background-color: transparent;
   border-inline-start: awsui.$border-width-button solid constants.$token-border-color;
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(awsui.$space-filtering-token-dismiss-button-focus-outline-gutter);
   }
 
diff --git a/src/radio-group/styles.scss b/src/radio-group/styles.scss
index f3754121ac..fc43662b7c 100644
--- a/src/radio-group/styles.scss
+++ b/src/radio-group/styles.scss
@@ -7,7 +7,6 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles/foundation' as foundation;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 $radio-size: awsui.$size-control;
 
diff --git a/src/segmented-control/segment.scss b/src/segmented-control/segment.scss
index f1056cef50..445be18f8b 100644
--- a/src/segmented-control/segment.scss
+++ b/src/segmented-control/segment.scss
@@ -7,7 +7,6 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
 @use '../button/constants' as constants;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 $segment-properties: (
   'default-background': awsui.$color-background-segment-default,
@@ -74,7 +73,7 @@ $segment-divider-width: 1px;
     color: $disabled-color;
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(awsui.$space-segmented-control-focus-outline-gutter);
   }
 
diff --git a/src/select/parts/styles.scss b/src/select/parts/styles.scss
index d4c49dc5c8..4ce7130f24 100644
--- a/src/select/parts/styles.scss
+++ b/src/select/parts/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .placeholder {
   @include styles.form-placeholder;
diff --git a/src/side-navigation/styles.scss b/src/side-navigation/styles.scss
index 1595911163..5be1b712eb 100644
--- a/src/side-navigation/styles.scss
+++ b/src/side-navigation/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .root {
   @include styles.styles-reset;
@@ -177,7 +176,7 @@
     text-decoration: none;
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.link-focus;
   }
 }
diff --git a/src/split-panel/styles.scss b/src/split-panel/styles.scss
index fd19463d29..1a162e0c08 100644
--- a/src/split-panel/styles.scss
+++ b/src/split-panel/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../app-layout/constants' as constants;
 
 $slider-width: 16px;
diff --git a/src/table/body-cell/styles.scss b/src/table/body-cell/styles.scss
index 9b05be203c..68402df56a 100644
--- a/src/table/body-cell/styles.scss
+++ b/src/table/body-cell/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 $cell-vertical-padding: awsui.$space-scaled-xs;
 // Calculate padding to prevent a shift in content after selection due to the difference
@@ -404,7 +403,7 @@ $cell-negative-space-vertical: 2px;
     }
 
     &-focusable {
-      @include focus-visible.when-visible {
+      &:focus-visible {
         // Making focus outline slightly smaller to not intersect with the success indicator.
         @include safe-focus-highlight(-1px);
       }
@@ -545,7 +544,7 @@ $cell-negative-space-vertical: 2px;
     }
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include cell-focus-outline;
   }
 }
diff --git a/src/table/header-cell/styles.scss b/src/table/header-cell/styles.scss
index d004215c5e..a24017364f 100644
--- a/src/table/header-cell/styles.scss
+++ b/src/table/header-cell/styles.scss
@@ -3,18 +3,17 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/styles' as styles;
 
 $cell-horizontal-padding: awsui.$space-scaled-l;
 
 @mixin when-focus-visible-or-fake {
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @content;
   }
   &.header-cell-fake-focus {
-    @include focus-visible.when-visible-unfocused {
+    &:focus-visible {
       @content;
     }
   }
diff --git a/src/table/resizer/styles.scss b/src/table/resizer/styles.scss
index 4e781162d7..8908437136 100644
--- a/src/table/resizer/styles.scss
+++ b/src/table/resizer/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../../internal/styles/index' as styles;
 @use '../../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 //stylelint-disable-next-line selector-combinator-disallowed-list,selector-max-universal
 .resize-active:not(.resize-active-with-focus) * {
@@ -68,11 +67,9 @@ th:last-child > .divider-interactive:not(.is-visual-refresh) {
     border-inline-start: $active-separator-width solid awsui.$color-border-divider-active;
   }
   &.has-focus {
-    @include focus-visible.when-visible-unfocused {
+    &:focus-visible {
       @include styles.focus-highlight(calc(#{awsui.$space-table-header-focus-outline-gutter} - 2px));
-      & {
-        position: absolute;
-      }
+      position: absolute;
     }
   }
 }
diff --git a/src/table/styles.scss b/src/table/styles.scss
index 27b571f808..8e469a2802 100644
--- a/src/table/styles.scss
+++ b/src/table/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../internal/styles/index' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../container/shared' as container;
 
 .root {
@@ -87,7 +86,7 @@
     display: none; /* Hide scrollbar in Safari and Chrome */
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.container-focus();
   }
 }
diff --git a/src/tabs/styles.scss b/src/tabs/styles.scss
index 7915303b10..4b5fd6c8c6 100644
--- a/src/tabs/styles.scss
+++ b/src/tabs/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @use './tab-header-bar';
 
@@ -32,7 +31,7 @@
 .tabs-content-active {
   display: block;
   flex: 1;
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.container-focus();
   }
 }
diff --git a/src/tabs/tab-header-bar.scss b/src/tabs/tab-header-bar.scss
index 091a91b91e..1eb64d435f 100644
--- a/src/tabs/tab-header-bar.scss
+++ b/src/tabs/tab-header-bar.scss
@@ -6,7 +6,6 @@
 /* stylelint-disable selector-max-type */
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 $separator-color: awsui.$color-border-tabs-divider;
 $label-horizontal-spacing: awsui.$space-xs;
@@ -213,7 +212,7 @@ $label-horizontal-spacing: awsui.$space-xs;
     outline: none;
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     z-index: 1;
     border-inline-end-color: transparent;
     @include styles.focus-highlight(awsui.$space-tabs-focus-outline-gutter);
diff --git a/src/tag-editor/styles.scss b/src/tag-editor/styles.scss
index 4a588f5f9b..b8dd8fbf5a 100644
--- a/src/tag-editor/styles.scss
+++ b/src/tag-editor/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .root {
   /* used in test utils */
@@ -18,7 +17,7 @@
 .undo-button {
   @include styles.link-recovery('body-m');
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.link-focus;
   }
 }
diff --git a/src/toggle/styles.scss b/src/toggle/styles.scss
index e39d3d9322..5d79194312 100644
--- a/src/toggle/styles.scss
+++ b/src/toggle/styles.scss
@@ -7,7 +7,6 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles/foundation' as foundation;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 $toggle-width: 2.4 * styles.$base-size;
 $toggle-height: 1.6 * styles.$base-size;
diff --git a/src/token-group/styles.scss b/src/token-group/styles.scss
index b8c85efd43..90a0961a4a 100644
--- a/src/token-group/styles.scss
+++ b/src/token-group/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use './constants' as constants;
 @use './mixins.scss' as mixins;
 
@@ -29,7 +28,7 @@
   color: awsui.$color-text-button-inline-icon-default;
   background-color: transparent;
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(0px);
   }
 
diff --git a/src/top-navigation/styles.scss b/src/top-navigation/styles.scss
index 5e943f1346..783b5f2526 100644
--- a/src/top-navigation/styles.scss
+++ b/src/top-navigation/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .top-navigation {
   @include styles.styles-reset;
@@ -68,7 +67,7 @@
       color: awsui.$color-text-accent;
     }
 
-    @include focus-visible.when-visible {
+    &:focus-visible {
       @include styles.link-focus;
     }
   }
@@ -293,7 +292,7 @@
     }
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
   }
 }
diff --git a/src/tutorial-panel/components/tutorial-list/styles.scss b/src/tutorial-panel/components/tutorial-list/styles.scss
index 41c83e4a25..c335054c89 100644
--- a/src/tutorial-panel/components/tutorial-list/styles.scss
+++ b/src/tutorial-panel/components/tutorial-list/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../../../internal/styles/tokens' as awsui;
 @use '../../../internal/styles' as styles;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @use './motion';
 
@@ -110,7 +109,7 @@
     text-decoration-color: currentColor;
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.link-focus;
   }
 }
diff --git a/src/wizard/styles.scss b/src/wizard/styles.scss
index d5f2341412..2d4576f5ce 100644
--- a/src/wizard/styles.scss
+++ b/src/wizard/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 .root {
@@ -96,7 +95,7 @@
           grid-column: 2;
         }
 
-        @include focus-visible.when-visible {
+        &:focus-visible {
           @include styles.link-focus;
         }
       }
@@ -272,7 +271,7 @@
 .form-header-component {
   &-wrapper {
     outline: none;
-    @include focus-visible.when-visible {
+    &:focus-visible {
       @include styles.link-focus;
     }
   }