perf: Replace use of :focus-visible shim

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),

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;
   }
 

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);
   }
 

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 {

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);
   }
 }

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

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);
   }
 

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;
     }
   }

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 {

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),

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,

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;
 

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,

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;

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;

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);
   }
 

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);
   }
 }

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,

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);
   }
 }

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);
   }
 }

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(

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;

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(