@cloudscape-design/components-themeable 3.0.690 → 3.0.691

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "e197f9f20dc0c217a09a1423d4d6b2cbb2efd55d"
+  "commit": "dba99012a8367a488ec497052ba97f2b58964ed9"
 }

package/lib/internal/scss/tabs/tab-header-bar.scss

@@ -9,7 +9,7 @@
 @use '../internal/hooks/focus-visible' as focus-visible;
 
 $separator-color: awsui.$color-border-tabs-divider;
-$label-horizontal-spacing: awsui.$space-l;
+$label-horizontal-spacing: awsui.$space-xs;
 
 .tabs-header {
   margin-block: 0;
@@ -73,29 +73,91 @@ $label-horizontal-spacing: awsui.$space-l;
 
   flex-shrink: 0;
   display: flex;
-  max-inline-size: calc(90% - #{$label-horizontal-spacing});
-
-  & > button {
-    background-color: transparent;
-  }
+  max-inline-size: calc(90% - awsui.$space-l);
 }
 
 .tabs-tab-label {
   display: flex;
   align-items: center;
-  padding-block: awsui.$space-scaled-2x-xxs;
   padding-inline: $label-horizontal-spacing;
+  padding-block: awsui.$space-scaled-2x-xxs;
   text-align: start;
   position: relative;
 
   @include styles.text-wrapping;
 }
 
+.tabs-tab-dismiss,
+.tabs-tab-action {
+  /* Used as a selector for tests */
+}
+
+.tabs-tab-header-container {
+  position: relative;
+
+  border-block: awsui.$border-divider-section-width solid transparent;
+  border-inline: awsui.$border-divider-section-width solid transparent;
+
+  padding-inline: $label-horizontal-spacing;
+  display: flex;
+  align-items: stretch;
+
+  &,
+  & > button {
+    background-color: transparent;
+  }
+
+  & > .tabs-tab-dismiss,
+  & > .tabs-tab-action {
+    display: flex;
+    align-items: center;
+  }
+
+  &.refresh > span:first-of-type {
+    margin-inline-start: calc(-1 * awsui.$space-scaled-xs);
+  }
+}
+
+.tabs-tab-header-container:not(.tabs-tab-disabled) {
+  // This is the underline for the currently selected tab.
+  &:after {
+    content: '';
+    position: absolute;
+    inset-inline-start: 0;
+    inline-size: calc(100% - 1px);
+    inset-block-end: calc(-1 * #{awsui.$border-divider-section-width});
+    block-size: awsui.$border-active-width;
+    border-start-start-radius: awsui.$border-radius-tabs-focus-ring;
+    border-start-end-radius: awsui.$border-radius-tabs-focus-ring;
+    border-end-start-radius: awsui.$border-radius-tabs-focus-ring;
+    border-end-end-radius: awsui.$border-radius-tabs-focus-ring;
+    background: awsui.$color-border-tabs-underline;
+    opacity: 0;
+  }
+
+  &.refresh {
+    &:after {
+      @include styles.with-motion {
+        transition: opacity awsui.$motion-duration-refresh-only-medium awsui.$motion-easing-refresh-only-c;
+      }
+    }
+  }
+}
+
 .tabs-tab:not(:last-child) {
-  & > a > .tabs-tab-label,
-  & > button > .tabs-tab-label {
+  & > .tabs-tab-header-container {
     margin-inline-end: calc(-1 * #{awsui.$border-divider-section-width});
-    border-inline-end: awsui.$border-divider-section-width solid $separator-color;
+    &:before {
+      content: '';
+      position: absolute;
+      border-inline-end: awsui.$border-divider-section-width solid $separator-color;
+      inset: calc(#{awsui.$space-scaled-s}) 0;
+      opacity: 1;
+    }
+
+    &.refresh:before {
+      inset: calc(#{awsui.$space-scaled-s} - #{awsui.$border-active-width}) 0;
+    }
   }
 }
 
@@ -105,8 +167,9 @@ $label-horizontal-spacing: awsui.$space-l;
   align-items: stretch;
   text-decoration: none;
   cursor: pointer;
-  padding-block-start: calc(#{awsui.$space-scaled-s} - 1px);
-  padding-block-end: awsui.$space-scaled-s;
+  padding-block-start: calc(#{awsui.$space-scaled-s} - 2px);
+  padding-block-end: calc(#{awsui.$space-scaled-s} - 1px);
+
   padding-inline: 0;
   margin-block-start: 1px;
   border-block: awsui.$border-divider-section-width solid transparent;
@@ -116,10 +179,15 @@ $label-horizontal-spacing: awsui.$space-l;
   line-height: awsui.$font-tabs-line-height;
   font-weight: awsui.$font-wayfinding-link-active-weight;
   color: awsui.$color-text-interactive-default;
+
+  padding-inline-start: calc(#{awsui.$space-xxs} - 1px);
+  padding-inline-end: awsui.$space-xxs;
+
   &.refresh {
     padding-block-start: calc(awsui.$space-static-xs - 1px);
-    padding-block-end: awsui.$space-static-xs;
-    padding-inline: 0;
+    padding-block-end: calc(awsui.$space-static-xs - 1px);
+
+    margin-block-start: 0;
   }
 
   &:hover {
@@ -129,23 +197,20 @@ $label-horizontal-spacing: awsui.$space-l;
   &:focus {
     outline: none;
   }
+
   @include styles.font-smoothing;
 
   @include focus-visible.when-visible {
     z-index: 1;
     @include styles.focus-highlight(awsui.$space-tabs-focus-outline-gutter);
-    & > a > .tabs-tab-label,
-    & > button > .tabs-tab-label {
-      border-inline-end-color: transparent;
-    }
+    border-inline-end-color: transparent;
   }
 }
 
 // Remediate focus shadow
 .tabs-tab:first-child {
   margin-inline-start: 1px;
-  & > a > .tabs-tab-label,
-  & > button > .tabs-tab-label {
+  & > .tabs-tab-header-container {
     padding-inline-start: calc(#{$label-horizontal-spacing} - 1px);
   }
 }
@@ -153,8 +218,7 @@ $label-horizontal-spacing: awsui.$space-l;
 // Remediate focus shadow
 .tabs-tab:last-child {
   margin-inline-end: 1px;
-  & > a > .tabs-tab-label,
-  & > button > .tabs-tab-label {
+  & > .tabs-tab-header-container {
     padding-inline-end: calc(#{$label-horizontal-spacing} - 1px);
   }
 }
@@ -169,32 +233,6 @@ $label-horizontal-spacing: awsui.$space-l;
   }
 }
 
-.tabs-tab-link:not(.tabs-tab-disabled) {
-  // This is the underline for the currently selected tab.
-  &:after {
-    content: '';
-    position: absolute;
-    inset-inline-start: 0;
-    inline-size: 100%;
-    inset-block-end: calc(-1 * #{awsui.$border-divider-section-width});
-    block-size: awsui.$border-active-width;
-    border-start-start-radius: awsui.$border-radius-tabs-focus-ring;
-    border-start-end-radius: awsui.$border-radius-tabs-focus-ring;
-    border-end-start-radius: awsui.$border-radius-tabs-focus-ring;
-    border-end-end-radius: awsui.$border-radius-tabs-focus-ring;
-    background: awsui.$color-border-tabs-underline;
-    opacity: 0;
-  }
-
-  &.refresh {
-    &:after {
-      @include styles.with-motion {
-        transition: opacity awsui.$motion-duration-refresh-only-medium awsui.$motion-easing-refresh-only-c;
-      }
-    }
-  }
-}
-
 .tabs-tab-active:not(.tabs-tab-disabled) {
   color: awsui.$color-text-accent;
   &:after {