@cloudscape-design/components-themeable 3.0.699 → 3.0.700

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "71869f1e81fc04eb163a84f0f1e94af090757d5a"
+  "commit": "b1f440556846ba333f72a6ef4ba255e4e7ecbdbc"
 }

package/lib/internal/scss/alert/styles.scss

@@ -6,7 +6,7 @@
 @use 'sass:map';
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @use './motion';
 

package/lib/internal/scss/anchor-navigation/styles.scss

@@ -4,7 +4,7 @@
 */
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../internal/styles/typography/constants.scss' as typography;
 
 $guide-line-width: 2px;

package/lib/internal/scss/annotation-context/annotation/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/styles' as styles;
-@use '../../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 @use './arrow';

package/lib/internal/scss/app-layout/drawer/styles.scss

@@ -4,7 +4,7 @@
 */
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/styles' as styles;
-@use '../../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../constants' as constants;
 
 .toggle {

package/lib/internal/scss/app-layout/toggles/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/styles' as styles;
-@use '../../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .toggle-button {
   cursor: pointer;

package/lib/internal/scss/app-layout/visual-refresh/trigger-button.scss

@@ -5,7 +5,7 @@
 
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
-@use '../../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @mixin trigger-selected-styles {
   background: awsui.$color-background-layout-toggle-selected-default;

package/lib/internal/scss/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../../../../internal/styles' as styles;
 @use '../../../../internal/styles/tokens' as awsui;
-@use '../../../../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @mixin trigger-selected-styles {
   background: awsui.$color-background-layout-toggle-selected-default;

package/lib/internal/scss/breadcrumb-group/item/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
-@use '../../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .link:after {
   display: none;

package/lib/internal/scss/button/styles.scss

@@ -6,7 +6,7 @@
 @use 'sass:map';
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use './constants' as constants;
 
 @mixin adjust-for-variant($variant) {

package/lib/internal/scss/calendar/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles/index' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../internal/styles/typography/index' as typographyConstants;
 @use './motion';
 

package/lib/internal/scss/checkbox/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 $checkbox-size: awsui.$size-control;
 

package/lib/internal/scss/code-editor/ace-editor.scss

@@ -6,7 +6,7 @@
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 @use './background-inline-svg.scss' as utils;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 /* stylelint-disable selector-combinator-disallowed-list, @cloudscape-design/no-implicit-descendant */
 

package/lib/internal/scss/code-editor/pane.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@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;

package/lib/internal/scss/code-editor/styles.scss

@@ -6,7 +6,7 @@
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles/foundation' as foundation;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use './ace-editor';
 @use './pane';
 

package/lib/internal/scss/collection-preferences/content-display/content-display-option.scss

@@ -5,16 +5,10 @@
 
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 $border-radius: awsui.$border-radius-item;
 
-@mixin focus-visible {
-  // stylelint-disable-next-line selector-combinator-disallowed-list
-  body[data-awsui-focus-visible='true'] & {
-    @content;
-  }
-}
-
 @mixin animated {
   @include styles.with-motion {
     transition: transform awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick;
@@ -75,7 +69,7 @@ $border-radius: awsui.$border-radius-item;
   border-start-end-radius: $border-radius;
   border-end-start-radius: $border-radius;
   border-end-end-radius: $border-radius;
-  @include focus-visible {
+  @include focus-visible.when-visible-unfocused {
     @include styles.focus-highlight(0px, $border-radius);
   }
 }

package/lib/internal/scss/date-picker/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles/index' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../internal/styles/typography/index' as typographyConstants;
 
 .root {

package/lib/internal/scss/date-range-picker/calendar/grids/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../../../internal/styles/index' as styles;
 @use '../../../internal/styles/tokens' as awsui;
-@use '../../../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../../../calendar/calendar' as calendar;
 
 @mixin border-radius($horizontal, $vertical) {

package/lib/internal/scss/date-range-picker/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles/index' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../internal/styles/typography/index' as typographyConstants;
 @use './motion';
 

package/lib/internal/scss/expandable-section/styles.scss

@@ -4,7 +4,7 @@
 */
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../container/shared' as container;
 
 @use './motion';

package/lib/internal/scss/file-upload/file-input/styles.scss

@@ -5,6 +5,7 @@
 
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/styles' as styles;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .upload-button,
 .upload-input {
@@ -21,8 +22,9 @@
 }
 
 .upload-button {
-  // stylelint-disable-next-line selector-combinator-disallowed-list
-  body[data-awsui-focus-visible='true'] &.force-focus-outline {
-    @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
+  @include focus-visible.when-visible-unfocused {
+    &.force-focus-outline {
+      @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
+    }
   }
 }

package/lib/internal/scss/flashbar/collapsible.scss

@@ -4,7 +4,7 @@
 */
 @use 'sass:map';
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@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;

package/lib/internal/scss/flashbar/styles.scss

@@ -3,7 +3,7 @@
  SPDX-License-Identifier: Apache-2.0
 */
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@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;

package/lib/internal/scss/form-field/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @import './motion';
 

package/lib/internal/scss/internal/components/abstract-switch/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
-@use '../../hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .content,
 .description,

package/lib/internal/scss/internal/components/button-trigger/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
-@use '../../hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../../../token-group/constants' as tokenGroup;
 
 @use './motion';

package/lib/internal/scss/internal/components/chart-legend/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
-@use '../../hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use './motion';
 
 .root {

package/lib/internal/scss/internal/components/handle/styles.scss

@@ -4,7 +4,7 @@
 */
 
 @use '../../styles' as styles;
-@use '../../hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../../styles/tokens' as awsui;
 
 .handle {

package/lib/internal/scss/internal/components/menu-dropdown/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
-@use '../../hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .button {
   @include styles.styles-reset;

package/lib/internal/scss/internal/components/panel-resize-handle/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
-@use '../../hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .slider {
   padding-block: 0;

package/lib/internal/scss/internal/components/token-list/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../../styles/tokens' as awsui;
 @use '../../styles' as styles;
-@use '../../hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .root {
   display: flex;

package/lib/internal/scss/internal/styles/links.scss

@@ -8,7 +8,7 @@
 @use './motion' as styles;
 @use './typography/' as typography;
 @use './forms/' as mixins;
-@use '../hooks/focus-visible/' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../../link/constants.scss' as constants;
 
 @mixin link-variant-style($variant) {

package/lib/internal/scss/link/styles.scss

@@ -6,7 +6,7 @@
 @use 'sass:map';
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use './constants' as constants;
 
 .link {

package/lib/internal/scss/pagination/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles/index' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible/index' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .root {
   @include styles.styles-reset;

package/lib/internal/scss/popover/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @import './arrow';
 @import './body';

package/lib/internal/scss/{internal/components → property-filter}/filtering-token/styles.scss

@@ -3,10 +3,10 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-@use '../../styles' as styles;
-@use '../../styles/tokens' as awsui;
-@use '../../hooks/focus-visible' as focus-visible;
-@use '../../../token-group/constants' as constants;
+@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;
 
 .root {
   display: flex;

package/lib/internal/scss/property-filter/test-classes/styles.scss

@@ -0,0 +1,33 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.filtering-token {
+  /* used in test-utils */
+}
+.filtering-token-dismiss-button {
+  /* used in test-utils */
+}
+.filtering-token-select {
+  /* used in test-utils */
+}
+.filtering-token-content {
+  /* used in test-utils */
+}
+
+.token-editor-field-property {
+  /* used in test-utils */
+}
+.token-editor-field-operator {
+  /* used in test-utils */
+}
+.token-editor-field-value {
+  /* used in test-utils */
+}
+.token-editor-cancel {
+  /* used in test-utils */
+}
+.token-editor-submit {
+  /* used in test-utils */
+}

package/lib/internal/scss/radio-group/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 $radio-size: awsui.$size-control;
 

package/lib/internal/scss/segmented-control/segment.scss

@@ -7,7 +7,7 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
 @use '../button/constants' as constants;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 $segment-properties: (
   'default-background': awsui.$color-background-segment-default,

package/lib/internal/scss/select/parts/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
-@use '../../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .placeholder {
   @include styles.form-placeholder;

package/lib/internal/scss/side-navigation/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .root {
   @include styles.styles-reset;

package/lib/internal/scss/slider/mixins.scss

@@ -61,6 +61,8 @@ $border-radius-slider-thumb: 50%;
 }
 
 @mixin base-thumb-disabled-styles {
+  block-size: $thumb-size;
+  inline-size: $thumb-size;
   background-color: awsui.$color-background-control-disabled;
   border-color: awsui.$color-background-control-disabled;
   box-shadow: none;

package/lib/internal/scss/slider/styles.scss

@@ -31,10 +31,6 @@
     border-end-end-radius: 3px;
     margin-block-start: awsui.$space-xs;
     margin-inline: calc(mixins.$thumb-size / -2);
-
-    &.readonly:not(&.disabled) {
-      margin-inline: calc(mixins.$thumb-readonly-size / -2);
-    }
   }
 
   &-track {
@@ -51,7 +47,6 @@
     &.readonly:not(&.disabled) {
       cursor: default;
       background-color: awsui.$color-background-control-disabled;
-      inline-size: calc(100% + mixins.$thumb-readonly-size);
     }
   }
 
@@ -187,7 +182,7 @@
   &.filled {
     background: awsui.$color-background-slider-handle-default;
 
-    &.readonly:not(.tick-disabled) {
+    &.readonly:not(.disabled) {
       background: awsui.$color-foreground-control-read-only;
     }
   }

package/lib/internal/scss/split-panel/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../app-layout/constants' as constants;
 
 @import './motion';

package/lib/internal/scss/table/body-cell/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
-@use '../../internal/hooks/focus-visible' as focus-visible;
+@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
@@ -56,21 +56,36 @@ $cell-offset: calc(#{awsui.$space-m} + #{awsui.$space-xs});
   inset-block: 0;
   display: flex;
   align-items: center;
-  margin-inline-start: calc(-1 * #{$cell-offset});
 }
 
 @mixin cell-padding-inline-start($padding) {
+  $max-nesting-levels: 9;
+  $offset-padding: calc($padding - 1 * awsui.$border-divider-list-width);
+
   > .body-cell-content {
-    padding-inline-start: calc(#{$padding} - 1 * #{awsui.$border-divider-list-width});
+    margin-inline-start: $offset-padding;
+  }
+  > .expandable-toggle-wrapper {
+    margin-inline-start: $offset-padding;
   }
 
-  @for $i from 0 through 9 {
-    &.expandable-level-#{$i} > .body-cell-content {
-      padding-inline-start: calc($padding + $i * $cell-offset - 1 * awsui.$border-divider-list-width);
+  @for $i from 0 through $max-nesting-levels {
+    &.expandable-level-#{$i} {
+      > .body-cell-content {
+        margin-inline-start: calc($offset-padding + $i * $cell-offset);
+      }
+      > .expandable-toggle-wrapper {
+        margin-inline-start: calc($offset-padding + ($i - 1) * $cell-offset);
+      }
     }
   }
-  &.expandable-level-next > .body-cell-content {
-    padding-inline-start: calc(#{$padding} + 9 * #{$cell-offset} - 1 * #{awsui.$border-divider-list-width});
+  &.expandable-level-next {
+    > .body-cell-content {
+      margin-inline-start: calc(#{$offset-padding} + #{$max-nesting-levels} * #{$cell-offset});
+    }
+    > .expandable-toggle-wrapper {
+      margin-inline-start: calc(#{$offset-padding} + (#{$max-nesting-levels} - 1) * #{$cell-offset});
+    }
   }
 }
 @mixin cell-padding-inline-end($padding) {

package/lib/internal/scss/table/expandable-rows/styles.scss

@@ -5,7 +5,7 @@
 
 @use '../../internal/styles/index' as styles;
 @use '../../internal/styles/tokens' as awsui;
-@use '../../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @use './motion';
 

package/lib/internal/scss/table/header-cell/styles.scss

@@ -3,7 +3,7 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-@use '../../internal/hooks/focus-visible' as focus-visible;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/styles' as styles;
 
@@ -11,9 +11,10 @@
   @include focus-visible.when-visible {
     @content;
   }
-  // stylelint-disable-next-line selector-combinator-disallowed-list
-  body[data-awsui-focus-visible='true'] &.header-cell-fake-focus {
-    @content;
+  &.header-cell-fake-focus {
+    @include focus-visible.when-visible-unfocused {
+      @content;
+    }
   }
 }
 

package/lib/internal/scss/table/resizer/styles.scss

@@ -5,6 +5,7 @@
 
 @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) * {
@@ -65,10 +66,11 @@ th:not(:last-child) > .divider {
   &:hover + .divider {
     border-inline-start: $active-separator-width solid awsui.$color-border-divider-active;
   }
-  // stylelint-disable-next-line selector-combinator-disallowed-list
-  body[data-awsui-focus-visible='true'] &.has-focus {
-    @include styles.focus-highlight(calc(#{awsui.$space-table-header-focus-outline-gutter} - 2px));
-    position: absolute;
+  &.has-focus {
+    @include focus-visible.when-visible-unfocused {
+      @include styles.focus-highlight(calc(#{awsui.$space-table-header-focus-outline-gutter} - 2px));
+      position: absolute;
+    }
   }
 }