@genexus/mercury 0.9.18 → 0.10.0

package/dist/mercury.scss

@@ -5461,45 +5461,183 @@
 }
 
 %flexible-layout {
-  --ch-tab-close-button__background-image-size: var(--mer-icon__size--md);
-  --ch-tab-close-button__image-size: var(--mer-icon__box--md);
+  --flexible-layout--tab-list-block__background-color: var(
+    --mer-surface__elevation--01
+  );
+  --flexible-layout--tab-list-inline__background-color: var(
+    --mer-surface__elevation--02
+  );
 
-  --spacing-body-block-start: var(--mer-spacing--md);
-  --spacing-body-block-end: var(--mer-spacing--md);
-  --spacing-body-inline-start: var(--mer-spacing--md);
-  --spacing-body-inline-end: var(--mer-spacing--md);
+  --flexible-layout--tab-list-inline__inline-size: 48px;
 
-  &-tab-caption {
-    background-color: color-mix(
-      in srgb,
-      var(--colors-foundation__gray--300) 20%,
-      transparent
+  --flexible-layout--tab-button-block-start__background-color: var(
+    --flexible-layout--tab-list-block__background-color
+  );
+  --flexible-layout--tab-button-block-end__background-color: var(
+    --flexible-layout--tab-list-block__background-color
+  );
+
+  --flexible-layout--tab-button-inline-start__background-color: var(
+    --flexible-layout--tab-list-inline__background-color
+  );
+  --flexible-layout--tab-button-inline-end__background-color: var(
+    --flexible-layout--tab-list-inline__background-color
+  );
+
+  --flexible-layout--tab-button-block-start__background-color--selected: var(
+    --mer-surface
+  );
+  --flexible-layout--tab-button-block-end__background-color--selected: var(
+    --mer-surface
+  );
+
+  &-tab {
+    --ch-tab-close-button__background-image-size: var(--mer-icon__size--md);
+    --ch-tab-close-button__image-size: 16px; // TODO: Use a token
+
+    --spacing-body-block-start: var(--mer-spacing--md);
+    --spacing-body-block-end: var(--mer-spacing--md);
+    --spacing-body-inline-start: var(--mer-spacing--md);
+    --spacing-body-inline-end: var(--mer-spacing--md);
+  }
+
+  &-tab-button-block {
+    @include tab-button-colors-enabled();
+    @include tab-button-font();
+    @include tab-button-gap();
+
+    padding-inline: var(--tab-caption__padding-inline);
+
+    // Due to border-block-width: 1px;
+    padding-block: calc(var(--tab-caption__padding-block) - 1px);
+
+    border-block: 1px solid transparent;
+  }
+
+  &-tab-button-inline {
+    @include tab-button-colors-enabled();
+    @include tab-button-font();
+    @include tab-button-gap();
+
+    padding-block: var(--tab-caption__padding-block);
+
+    // Due to border-inline-width: 1px;
+    padding-inline: calc(var(--tab-caption__padding-inline) - 1px);
+
+    border-inline: 1px solid transparent;
+  }
+
+  // Block Start
+  &-tab-button-block-start {
+    background-color: var(
+      --flexible-layout--tab-button-block-start__background-color
     );
+  }
 
-    &--selected {
-      background-color: color-mix(
-        in srgb,
-        var(--colors-foundation__gray--300) 50%,
-        transparent
-      );
-    }
+  &-tab-button-block-start--hover {
+    @include tab-button-colors-hover();
+  }
+
+  &-tab-button-block-start--active {
+    @include tab-button-colors-hover();
+  }
+
+  &-tab-button-block-start--selected {
+    border-block-start-color: var(--mer-accent__primary);
+    background-color: var(
+      --flexible-layout--tab-button-block-start__background-color--selected
+    );
+  }
+
+  // Block End
+  &-tab-button-block-end {
+    background-color: var(
+      --flexible-layout--tab-button-block-end__background-color
+    );
+  }
+
+  &-tab-button-block-end--hover {
+    @include tab-button-colors-hover();
+  }
+
+  &-tab-button-block-end--active {
+    @include tab-button-colors-hover();
+  }
+
+  &-tab-button-block-end--selected {
+    border-block-end-color: var(--mer-accent__primary);
+    background-color: var(
+      --flexible-layout--tab-button-block-end__background-color--selected
+    );
+  }
+
+  // Inline Start
+  &-tab-button-inline-start {
+    background-color: var(
+      --flexible-layout--tab-button-inline-start__background-color
+    );
+    inline-size: var(--flexible-layout--tab-list-inline__inline-size);
+  }
+
+  &-tab-button-inline-start--hover {
+    @include tab-button-colors-hover();
+  }
+
+  &-tab-button-inline-start--active {
+    @include tab-button-colors-hover();
+  }
+
+  &-tab-button-inline-start--selected {
+    border-inline-start-color: var(--mer-accent__primary);
+    color: var(--mer-accent__primary);
+  }
+
+  // Inline End
+  &-tab-button-inline-end {
+    background-color: var(
+      --flexible-layout--tab-button-inline-end__background-color
+    );
+    inline-size: var(--flexible-layout--tab-list-inline__inline-size);
+  }
+
+  &-tab-button-inline-end--hover {
+    @include tab-button-colors-hover();
+  }
+
+  &-tab-button-inline-end--active {
+    @include tab-button-colors-hover();
+  }
+
+  &-tab-button-inline-end--selected {
+    border-inline-end-color: var(--mer-accent__primary);
+    color: var(--mer-accent__primary);
+  }
+
+  // Disabled
+  &-tab-button--disabled {
+    @include tab-button-colors-disabled();
   }
 
   &-tab-list--inline {
-    background-color: var(--mer-color__neutral-gray--600);
-    inline-size: 48px;
+    background-color: var(--flexible-layout--tab-list-inline__background-color);
+    inline-size: var(--flexible-layout--tab-list-inline__inline-size);
     gap: 4px;
   }
 
   &-tab-list--block {
-    background-color: var(--mer-color__neutral-gray--650);
+    background-color: var(--flexible-layout--tab-list-block__background-color);
     overflow: auto;
   }
 
+  // Disabled
+  &-tab-button--disabled {
+    @include tab-button-colors-disabled();
+  }
+
   &-droppable-area {
     background-color: color-mix(
       in srgb,
-      var(--accents__secondary--hover) 25%,
+      var(--mer-accent__primary) 25%,
       transparent
     );
   }
@@ -5511,48 +5649,194 @@
 
 @mixin flexible-layout(
   $flexible-layout-selector: ".flexible-layout",
-  $flexible-layout__bar-selector: ".flexible-layout::part(bar)",
   $tab-selector: ".flexible-layout::part(leaf)",
-  $tab-caption-selector: ".flexible-layout::part(button)",
-  $tab-caption--block-selector: ".flexible-layout::part(button block)",
-  $tab-caption--inline-selector: ".flexible-layout::part(button inline)",
-  $tab-caption--selected-selector: ".flexible-layout::part(button selected)",
-  $tab-caption--disabled-selector: ".flexible-layout::part(button disabled)",
-  $tab-caption__close-button-selector: ".flexible-layout::part(close-button)",
+
+  $tab-button-block-start-selector: ".flexible-layout::part(tab block-start)",
+  $tab-button-block-start--selected-selector:
+    ".flexible-layout::part(tab block-start selected)",
+  $tab-button-block-start--disabled-selector:
+    ".flexible-layout::part(tab block-start disabled)",
+
+  $tab-button-block-end-selector: ".flexible-layout::part(tab block-end)",
+  $tab-button-block-end--selected-selector:
+    ".flexible-layout::part(tab block-end selected)",
+  $tab-button-block-end--disabled-selector:
+    ".flexible-layout::part(tab block-end disabled)",
+
+  $tab-button-inline-start-selector: ".flexible-layout::part(tab inline-start)",
+  $tab-button-inline-start--selected-selector:
+    ".flexible-layout::part(tab inline-start selected)",
+  $tab-button-inline-start--disabled-selector:
+    ".flexible-layout::part(tab inline-start disabled)",
+
+  $tab-button-inline-end-selector: ".flexible-layout::part(tab inline-end)",
+  $tab-button-inline-end--selected-selector:
+    ".flexible-layout::part(tab inline-end selected)",
+  $tab-button-inline-end--disabled-selector:
+    ".flexible-layout::part(tab inline-end disabled)",
+
+  $tab-button-close-button-selector: ".flexible-layout::part(close-button)",
+
   $tab-list--inline-selector: ".flexible-layout::part(tab-list inline)",
   $tab-list--block-selector: ".flexible-layout::part(tab-list block)",
+
+  $bar-selector: ".flexible-layout::part(bar)",
   $droppable-area-selector: ".flexible-layout::part(droppable-area)",
+  $add--tab-button-block-start: true,
+  $add--tab-button-block-end: true,
+  $add--tab-button-inline-start: true,
+  $add--tab-button-inline-end: true,
   $add--disabled: true
 ) {
+  #{$flexible-layout-selector} {
+    @extend %flexible-layout;
+  }
+
   @include tab(
-    $tab-selector: #{$tab-selector},
-    $tab-caption-selector: #{$tab-caption-selector},
-    $tab-caption--block-selector: #{$tab-caption--block-selector},
-    $tab-caption--inline-selector: #{$tab-caption--inline-selector},
-    $tab-caption--selected-selector: #{$tab-caption--selected-selector},
-    $tab-caption__close-button-selector: #{$tab-caption__close-button-selector},
+    $tab-button-close-button-selector: #{$tab-button-close-button-selector},
+    $add--tab-button-block-start: false,
+    $add--tab-button-block-end: false,
+    $add--tab-button-inline-start: false,
+    $add--tab-button-inline-end: false,
     $add--tab: false,
     $add--tab-list: false,
     $add--disabled: $add--disabled
   );
 
-  #{$flexible-layout-selector} {
-    @extend %flexible-layout;
+  #{$tab-selector} {
+    @extend %flexible-layout-tab;
   }
 
-  #{$flexible-layout__bar-selector} {
+  #{$bar-selector} {
     @extend %flexible-layout-bar;
   }
 
   // - - - - - - - - - - - - - - - - - - - -
-  //               Tab Caption
+  //        Tab Button (block-start)
   // - - - - - - - - - - - - - - - - - - - -
-  #{$tab-caption-selector} {
-    @extend %flexible-layout-tab-caption;
+  @if $add--tab-button-block-start {
+    #{$tab-button-block-start-selector} {
+      @extend %flexible-layout-tab-button-block;
+      @extend %flexible-layout-tab-button-block-start;
+
+      &:hover {
+        @extend %flexible-layout-tab-button-block-start--hover;
+      }
+
+      &:active {
+        @extend %flexible-layout-tab-button-block-start--active;
+      }
+
+      &:focus-visible {
+        @extend %tab-button--focus-visible;
+      }
+    }
+
+    #{$tab-button-block-start--selected-selector} {
+      @extend %flexible-layout-tab-button-block-start--selected;
+    }
+
+    @if $add--disabled {
+      #{$tab-button-block-start--disabled-selector} {
+        @extend %flexible-layout-tab-button--disabled;
+      }
+    }
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //         Tab Button (block-end)
+  // - - - - - - - - - - - - - - - - - - - -
+  @if $add--tab-button-block-end {
+    #{$tab-button-block-end-selector} {
+      @extend %flexible-layout-tab-button-block;
+      @extend %flexible-layout-tab-button-block-end;
+
+      &:hover {
+        @extend %flexible-layout-tab-button-block-end--hover;
+      }
+
+      &:active {
+        @extend %flexible-layout-tab-button-block-end--active;
+      }
+
+      &:focus-visible {
+        @extend %tab-button--focus-visible;
+      }
+    }
+
+    #{$tab-button-block-end--selected-selector} {
+      @extend %flexible-layout-tab-button-block-end--selected;
+    }
+
+    @if $add--disabled {
+      #{$tab-button-block-end--disabled-selector} {
+        @extend %flexible-layout-tab-button--disabled;
+      }
+    }
   }
 
-  #{$tab-caption--selected-selector} {
-    @extend %flexible-layout-tab-caption--selected;
+  // - - - - - - - - - - - - - - - - - - - -
+  //        Tab Button (inline-start)
+  // - - - - - - - - - - - - - - - - - - - -
+  @if $add--tab-button-inline-start {
+    #{$tab-button-inline-start-selector} {
+      @extend %flexible-layout-tab-button-inline;
+      @extend %flexible-layout-tab-button-inline-start;
+
+      &:hover {
+        @extend %flexible-layout-tab-button-inline-start--hover;
+      }
+
+      &:active {
+        @extend %flexible-layout-tab-button-inline-start--active;
+      }
+
+      &:focus-visible {
+        @extend %tab-button--focus-visible;
+      }
+    }
+
+    #{$tab-button-inline-start--selected-selector} {
+      @extend %flexible-layout-tab-button-inline-start--selected;
+    }
+
+    @if $add--disabled {
+      #{$tab-button-inline-start--disabled-selector} {
+        @extend %flexible-layout-tab-button--disabled;
+      }
+    }
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //         Tab Button (inline-end)
+  // - - - - - - - - - - - - - - - - - - - -
+  @if $add--tab-button-inline-end {
+    #{$tab-button-inline-end-selector} {
+      @extend %flexible-layout-tab-button-inline;
+      @extend %flexible-layout-tab-button-inline-end;
+
+      &:hover {
+        @extend %flexible-layout-tab-button-inline-end--hover;
+      }
+
+      &:active {
+        @extend %flexible-layout-tab-button-inline-end--active;
+      }
+
+      &:focus-visible {
+        @extend %tab-button--focus-visible;
+      }
+    }
+
+    #{$tab-button-inline-end--selected-selector} {
+      @extend %flexible-layout-tab-button-inline-end--selected;
+    }
+
+    @if $add--disabled {
+      #{$tab-button-inline-end--disabled-selector} {
+        @extend %flexible-layout-tab-button--disabled;
+      }
+    }
   }
 
   // - - - - - - - - - - - - - - - - - - - -
@@ -8412,7 +8696,7 @@
 
 %tab {
   --ch-tab-close-button__background-image-size: var(--mer-icon__size--md);
-  --ch-tab-close-button__image-size: var(--mer-icon__box--md);
+  --ch-tab-close-button__image-size: 16px; // TODO: Use a token
 
   --spacing-body-block-start: var(--mer-spacing--md);
   --spacing-body-block-end: var(--mer-spacing--md);
@@ -8423,76 +8707,176 @@
   @include items-container-colors();
 }
 
-%tab-caption {
+%tab-button-block {
   @include tab-button-colors-enabled();
   @include tab-button-font();
   @include tab-button-gap();
 
-  &--hover {
-    @include tab-button-colors-hover();
-  }
+  @include tab-button-padding-inline();
+  border-block: var(--tab-caption__border-width)
+    var(--tab-caption__border-style) transparent;
 
-  &--focus-visible {
-    @include focus-outline();
-  }
+  // TODO: Remove this mixin
+  // @include tab-button-border-block-end();
+}
 
-  &--block {
-    @include tab-button-padding-inline();
-    @include tab-button-border-block-end();
-  }
+%tab-button-inline {
+  @include tab-button-colors-enabled();
+  @include tab-button-font();
+  @include tab-button-gap();
 
-  &--inline {
-    @include tab-button-padding-stack();
-    @include tab-button-border-block();
-  }
+  @include tab-button-padding-stack();
+  border-inline: var(--tab-caption__border-width)
+    var(--tab-caption__border-style) transparent;
 
-  &--selected {
-    &-inline {
-      @include tab-button-colors-selected-stack();
-    }
-    &-block {
-      @include tab-button-colors-selected-inline();
-    }
-  }
+  // TODO: Remove this mixin
+  // @include tab-button-border-block();
+}
 
-  &--disabled {
-    @include tab-button-colors-disabled();
-    --tab-caption__border-width: 0;
+// Block Start
+%tab-button-block-start--hover {
+  @include tab-button-colors-hover();
+}
+
+%tab-button-block-start--active {
+  // TODO
+  @include tab-button-colors-hover();
+}
+
+%tab-button-block-start--selected {
+  @include tab-button-colors-selected-inline();
+  border-block-end-color: var(--tab-caption__border-color);
+}
+
+// Block End
+%tab-button-block-end--hover {
+  @include tab-button-colors-hover();
+}
+
+%tab-button-block-end--active {
+  // TODO
+  @include tab-button-colors-hover();
+}
+
+%tab-button-block-end--selected {
+  @include tab-button-colors-selected-inline();
+  border-block-start-color: var(--tab-caption__border-color);
+}
+
+// Inline Start
+%tab-button-inline-start--hover {
+  @include tab-button-colors-hover();
+}
+
+%tab-button-inline-start--active {
+  // TODO
+  @include tab-button-colors-hover();
+}
+
+%tab-button-inline-start--selected {
+  @include tab-button-colors-selected-stack();
+  border-inline-end-color: var(--tab-caption__border-color);
+}
+
+// Inline End
+%tab-button-inline-end--hover {
+  @include tab-button-colors-hover();
+}
+
+%tab-button-inline-end--active {
+  // TODO
+  @include tab-button-colors-hover();
+}
+
+%tab-button-inline-end--selected {
+  @include tab-button-colors-selected-stack();
+  border-inline-start-color: var(--tab-caption__border-color);
+}
+
+// Focus
+%tab-button--focus-visible {
+  @include focus-outline();
+}
+
+// Disabled
+%tab-button--disabled {
+  @include tab-button-colors-disabled();
+  --tab-button__border-width: 0;
+}
+
+%tab-button-close-button {
+  margin-inline-start: 4px;
+  border-radius: 4px;
+
+  &--hover {
+    background-color: var(--mer-color__tinted-primary--20);
   }
 
-  &__close-button {
-    &--focus {
-      @include focus-outline();
-    }
+  &--focus-visible {
+    @include focus-outline();
   }
 }
 
 %tab-list {
-  &--block {
+  &--block-start {
     border-block-end: var(--items-container__border-width)
       var(--items-container__border-style) var(--items-container__border-color);
   }
 
-  &--inline {
+  &--block-end {
+    border-block-start: var(--items-container__border-width)
+      var(--items-container__border-style) var(--items-container__border-color);
+  }
+
+  &--inline-start {
     border-inline-end: var(--items-container__border-width)
       var(--items-container__border-style) var(--items-container__border-color);
   }
+
+  &--inline-end {
+    border-inline-start: var(--items-container__border-width)
+      var(--items-container__border-style) var(--items-container__border-color);
+  }
 }
 
 @mixin tab(
   $tab-selector: ".tab",
-  $tab-caption-selector: ".tab::part(button)",
-  $tab-caption--block-selector: ".tab::part(button block)",
-  $tab-caption--inline-selector: ".tab::part(button inline)",
-  $tab-caption--selected-selector: ".tab::part(button selected)",
-  $tab-caption--selected-inline-selector: ".tab::part(button inline selected)",
-  $tab-caption--selected-block-selector: ".tab::part(button block selected)",
-  $tab-caption--disabled-selector: ".tab::part(button disabled)",
-  $tab-caption__close-button-selector: ".tab::part(close-button)",
-  $tab-list-selector: ".tab::part(tab-list)",
-  $tab-list--block-selector: ".tab::part(tab-list block)",
-  $tab-list--inline-selector: ".tab::part(tab-list inline)",
+
+  $tab-button-block-start-selector: ".tab::part(tab block-start)",
+  $tab-button-block-start--selected-selector:
+    ".tab::part(tab block-start selected)",
+  $tab-button-block-start--disabled-selector:
+    ".tab::part(tab block-start disabled)",
+
+  $tab-button-block-end-selector: ".tab::part(tab block-end)",
+  $tab-button-block-end--selected-selector: ".tab::part(tab block-end selected)",
+  $tab-button-block-end--disabled-selector: ".tab::part(tab block-end disabled)",
+
+  $tab-button-inline-start-selector: ".tab::part(tab inline-start)",
+  $tab-button-inline-start--selected-selector:
+    ".tab::part(tab inline-start selected)",
+  $tab-button-inline-start--disabled-selector:
+    ".tab::part(tab inline-start disabled)",
+
+  $tab-button-inline-end-selector: ".tab::part(tab inline-end)",
+  $tab-button-inline-end--selected-selector:
+    ".tab::part(tab inline-end selected)",
+  $tab-button-inline-end--disabled-selector:
+    ".tab::part(tab inline-end disabled)",
+
+  $tab-button--disabled-selector: ".tab::part(tab disabled)",
+  $tab-button-close-button-selector: ".tab::part(close-button)",
+
+  $tab-list--block-start-selector: ".tab::part(tab-list block-start)",
+  $tab-list--block-end-selector: ".tab::part(tab-list block-end)",
+  $tab-list--inline-start-selector: ".tab::part(tab-list inline-start)",
+  $tab-list--inline-end-selector: ".tab::part(tab-list inline-end)",
+
   $add--tab: true,
+  $add--tab-button-block-start: true,
+  $add--tab-button-block-end: true,
+  $add--tab-button-inline-start: true,
+  $add--tab-button-inline-end: true,
   $add--tab-list: true,
   $add--disabled: true
 ) {
@@ -8502,62 +8886,165 @@
     }
   }
 
-  #{$tab-caption-selector} {
-    // @extend %tab-text;
-    @extend %tab-caption;
+  // - - - - - - - - - - - - - - - - - - - -
+  //        Tab Button (block-start)
+  // - - - - - - - - - - - - - - - - - - - -
+  @if ($add--tab-button-block-start) {
+    #{$tab-button-block-start-selector} {
+      @extend %tab-button-block;
 
-    &:hover {
-      @extend %tab-caption--hover;
+      &:hover {
+        @extend %tab-button-block-start--hover;
+      }
+
+      &:active {
+        @extend %tab-button-block-start--active;
+      }
+
+      &:focus-visible {
+        @extend %tab-button--focus-visible;
+      }
     }
 
-    &:focus-visible {
-      @extend %tab-caption--focus-visible;
+    #{$tab-button-block-start--selected-selector} {
+      @extend %tab-button-block-start--selected;
     }
-  }
 
-  #{$tab-caption--block-selector} {
-    @extend %tab-caption--block;
+    @if $add--disabled {
+      #{$tab-button-block-start--disabled-selector} {
+        @extend %tab-button--disabled;
+      }
+    }
   }
 
-  #{$tab-caption--inline-selector} {
-    @extend %tab-caption--inline;
+  // - - - - - - - - - - - - - - - - - - - -
+  //         Tab Button (block-end)
+  // - - - - - - - - - - - - - - - - - - - -
+  @if ($add--tab-button-block-end) {
+    #{$tab-button-block-end-selector} {
+      @extend %tab-button-block;
+
+      &:hover {
+        @extend %tab-button-block-end--hover;
+      }
+
+      &:active {
+        @extend %tab-button-block-end--active;
+      }
+
+      &:focus-visible {
+        @extend %tab-button--focus-visible;
+      }
+    }
+
+    #{$tab-button-block-end--selected-selector} {
+      @extend %tab-button-block-end--selected;
+    }
+
+    @if $add--disabled {
+      #{$tab-button-block-end--disabled-selector} {
+        @extend %tab-button--disabled;
+      }
+    }
   }
 
-  #{$tab-caption--selected-selector} {
-    @extend %tab-caption--selected;
+  // - - - - - - - - - - - - - - - - - - - -
+  //        Tab Button (inline-start)
+  // - - - - - - - - - - - - - - - - - - - -
+  @if ($add--tab-button-inline-start) {
+    #{$tab-button-inline-start-selector} {
+      @extend %tab-button-inline;
+
+      &:hover {
+        @extend %tab-button-inline-start--hover;
+      }
+
+      &:active {
+        @extend %tab-button-inline-start--active;
+      }
+
+      &:focus-visible {
+        @extend %tab-button--focus-visible;
+      }
+    }
+
+    #{$tab-button-inline-start--selected-selector} {
+      @extend %tab-button-inline-start--selected;
+    }
+
+    @if $add--disabled {
+      #{$tab-button-inline-start--disabled-selector} {
+        @extend %tab-button--disabled;
+      }
+    }
   }
 
-  #{$tab-caption--selected-inline-selector} {
-    @extend %tab-caption--selected-inline;
+  // - - - - - - - - - - - - - - - - - - - -
+  //         Tab Button (inline-end)
+  // - - - - - - - - - - - - - - - - - - - -
+  @if ($add--tab-button-inline-end) {
+    #{$tab-button-inline-end-selector} {
+      @extend %tab-button-inline;
+
+      &:hover {
+        @extend %tab-button-inline-end--hover;
+      }
+
+      &:active {
+        @extend %tab-button-inline-end--active;
+      }
+
+      &:focus-visible {
+        @extend %tab-button--focus-visible;
+      }
+    }
+
+    #{$tab-button-inline-end--selected-selector} {
+      @extend %tab-button-inline-end--selected;
+    }
+
+    @if $add--disabled {
+      #{$tab-button-inline-end--disabled-selector} {
+        @extend %tab-button--disabled;
+      }
+    }
   }
 
-  #{$tab-caption--selected-block-selector} {
-    @extend %tab-caption--selected-block;
+  #{$tab-button-close-button-selector} {
+    @extend %tab-button-close-button;
+
+    &:focus-visible {
+      @extend %tab-button-close-button--focus-visible;
+    }
   }
 
-  #{$tab-caption__close-button-selector} {
+  #{$tab-button-close-button-selector} {
+    @extend %tab-button-close-button;
+
+    &:hover {
+      @extend %tab-button-close-button--hover;
+    }
+
     &:focus-visible {
-      @extend %tab-caption__close-button--focus;
+      @extend %tab-button-close-button--focus-visible;
     }
   }
 
   @if $add--tab-list {
-    #{$tab-list-selector} {
-      @extend %tab-list;
+    #{$tab-list--block-start-selector} {
+      @extend %tab-list--block-start;
     }
-  }
 
-  #{$tab-list--block-selector} {
-    @extend %tab-list--block;
-  }
+    #{$tab-list--block-end-selector} {
+      @extend %tab-list--block-end;
+    }
 
-  #{$tab-list--inline-selector} {
-    @extend %tab-list--inline;
-  }
+    #{$tab-list--inline-start-selector} {
+      @extend %tab-list--inline-start;
+    }
 
-  @if $add--disabled {
-    #{$tab-caption--disabled-selector} {
-      @extend %tab-caption--disabled;
+    #{$tab-list--inline-end-selector} {
+      @extend %tab-list--inline-end;
     }
   }
 }