From 3a17b178feea8b62d943ecdfa283c186df588fab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20C=C3=A1mera?= <ncamera@genexus.com>
Date: Mon, 2 Dec 2024 12:02:13 -0300
Subject: [PATCH 1/4] [unanimo] Improve tab and flexible-layout styling

---
 .../src/components/_flexible-layout.scss      | 354 ++++++++++++++++--
 packages/unanimo/src/components/_tab.scss     | 238 ++++++++++--
 2 files changed, 517 insertions(+), 75 deletions(-)

diff --git a/packages/unanimo/src/components/_flexible-layout.scss b/packages/unanimo/src/components/_flexible-layout.scss
index 40cfd99f4..8a80c276f 100644
--- a/packages/unanimo/src/components/_flexible-layout.scss
+++ b/packages/unanimo/src/components/_flexible-layout.scss
@@ -1,35 +1,160 @@
 %flexible-layout {
-  &-tab-caption {
-    background-color: color-mix(
-      in srgb,
-      var(--colors-foundation__gray--300) 20%,
-      transparent
+  --flexible-layout--tab-list-block__background-color: var(--elevation--2);
+  --flexible-layout--tab-list-inline__background-color: color-mix(
+    in srgb,
+    var(--colors-foundation__gray--200) 70%,
+    var(--colors-foundation__gray--300)
+  );
+
+  --flexible-layout--tab-list-inline__inline-size: 48px;
+
+  --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(
+    --surface--alternative
+  );
+  --flexible-layout--tab-button-block-end__background-color--selected: var(
+    --surface--alternative
+  );
+
+  &-tab-button-block {
+    padding-inline: var(--spacing--m);
+
+    // Due to border-block-width: 2px;
+    padding-block: calc(var(--spacing--m) - 2px);
+
+    border-block: 2px solid transparent;
+    gap: var(--spacing--s);
+  }
+
+  &-tab-button-inline {
+    padding-block: var(--spacing--m);
+
+    // Due to border-inline-width: 2px;
+    padding-inline: calc(var(--spacing--m) - 2px);
+
+    border-inline: 2px solid transparent;
+    gap: var(--spacing--s);
+  }
+
+  // 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 {
+    border-block-start-color: var(--border-color__primary--hover);
+  }
+
+  &-tab-button-block-start--active {
+    border-block-start-color: var(--border-color__primary--active);
+  }
+
+  &-tab-button-block-start--selected {
+    border-block-start-color: var(--border-color__primary--active);
+    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 {
+    border-block-end-color: var(--border-color__primary--hover);
+  }
+
+  &-tab-button-block-end--active {
+    border-block-end-color: var(--border-color__primary--active);
+  }
+
+  &-tab-button-block-end--selected {
+    border-block-end-color: var(--border-color__primary--active);
+    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 {
+    border-inline-start-color: var(--border-color__primary--hover);
+  }
+
+  &-tab-button-inline-start--active {
+    border-inline-start-color: var(--border-color__primary--active);
+  }
+
+  &-tab-button-inline-start--selected {
+    border-inline-start-color: var(--border-color__primary--active);
+    color: var(--border-color__primary--active);
+  }
+
+  // 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 {
+    border-inline-end-color: var(--border-color__primary--hover);
+  }
+
+  &-tab-button-inline-end--active {
+    border-inline-end-color: var(--border-color__primary--active);
+  }
+
+  &-tab-button-inline-end--selected {
+    border-inline-end-color: var(--border-color__primary--active);
+    color: var(--border-color__primary--active);
+  }
+
+  // Disabled
+  &-tab-button--disabled {
+    color: var(--text__disabled);
   }
 
   &-tab-list--inline {
-    background-color: var(--colors-foundation__gray--300);
-    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: color-mix(
-      in srgb,
-      var(--colors-foundation__gray--300) 15%,
-      transparent
-    );
+    background-color: var(--flexible-layout--tab-list-block__background-color);
     overflow: auto;
   }
 
+  &-bar-selector {
+    color: var(--border-color__mild);
+  }
+
   &-droppable-area {
     background-color: color-mix(
       in srgb,
@@ -40,48 +165,207 @@
 }
 
 @mixin flexible-layout(
+  $flexible-layout-selector: ".flexible-layout",
   $tab-selector: ".flexible-layout::part(leaf)",
-  $tab-caption-selector: ".flexible-layout::part(button)",
-  $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-list--inline-selector: ".flexible-layout::part(tab-list inline)",
-  $tab-list--block-selector: ".flexible-layout::part(tab-list block)",
+  $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-start-selector:
+    ".flexible-layout::part(tab-list inline-start)",
+  $tab-list--inline-end-selector: ".flexible-layout::part(tab-list inline-end)",
+  $tab-list--block-start-selector:
+    ".flexible-layout::part(tab-list block-start)",
+  $tab-list--block-end-selector: ".flexible-layout::part(tab-list block-end)",
+  $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--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
   );
 
+  // AGREGAR CLASES PARA EL FLEXIBLE LAYOUT CAMBIANDO LA POSICION DEL BORDE y USANDO EL BACKGROUND COLOR COMO LA SUPERFICIE
+  // AGREGAR CUSTOM VAR PARA DETERMINAR EL BACKGROUND COLOR DE SELECCION
+
   // - - - - - - - - - - - - - - - - - - - -
-  //               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;
   }
 
-  #{$tab-caption--selected-selector} {
-    @extend %flexible-layout-tab-caption--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 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;
+      }
+    }
   }
 
   // - - - - - - - - - - - - - - - - - - - -
   //                Tab List
   // - - - - - - - - - - - - - - - - - - - -
-  #{$tab-list--inline-selector} {
+  #{$tab-list--inline-start-selector},
+  #{$tab-list--inline-end-selector} {
     @extend %flexible-layout-tab-list--inline;
   }
 
-  #{$tab-list--block-selector} {
+  #{$tab-list--block-start-selector},
+  #{$tab-list--block-end-selector} {
     @extend %flexible-layout-tab-list--block;
   }
 
+  #{$bar-selector} {
+    @extend %flexible-layout-bar-selector;
+  }
+
   // - - - - - - - - - - - - - - - - - - - -
   //             Droppable area
   // - - - - - - - - - - - - - - - - - - - -
diff --git a/packages/unanimo/src/components/_tab.scss b/packages/unanimo/src/components/_tab.scss
index c15d99e18..485cbe2dd 100644
--- a/packages/unanimo/src/components/_tab.scss
+++ b/packages/unanimo/src/components/_tab.scss
@@ -3,27 +3,74 @@
   --ch-tab-mask-image-size: calc(var(--spacing--xl) - var(--spacing--m));
 }
 
-%tab-caption {
+%tab-button-block {
   padding-inline: var(--spacing--m);
-  padding-block: var(--spacing--m) calc(var(--spacing--m) - 2px); // due to border-block-end-width: 2px;
-  border-block-end: 2px solid transparent;
+
+  // Due to border-block-width: 2px;
+  padding-block: calc(var(--spacing--m) - 2px);
+
+  border-block: 2px solid transparent;
+  gap: var(--spacing--s);
+}
+
+%tab-button-inline {
+  padding-block: var(--spacing--m);
+
+  // Due to border-inline-width: 2px;
+  padding-inline: calc(var(--spacing--m) - 2px);
+
+  border-inline: 2px solid transparent;
   gap: var(--spacing--s);
 }
 
-%tab-caption--hover {
+// Block Start
+%tab-button-block-start--hover {
   border-block-end-color: var(--border-color__primary--hover);
 }
 
-%tab-caption--active {
+%tab-button-block-start--active {
   border-block-end-color: var(--border-color__primary--active);
 }
 
-%tab-caption--focus-visible {
+// Block End
+%tab-button-block-end--hover {
+  border-block-start-color: var(--border-color__primary--hover);
+}
+
+%tab-button-block-end--active {
+  border-block-start-color: var(--border-color__primary--active);
+}
+
+// Inline Start
+%tab-button-inline-start--hover {
+  border-inline-end-color: var(--border-color__primary--hover);
+}
+
+%tab-button-inline-start--active {
+  border-inline-end-color: var(--border-color__primary--active);
+}
+
+// Inline End
+%tab-button-inline-end--hover {
+  border-inline-start-color: var(--border-color__primary--hover);
+}
+
+%tab-button-inline-end--active {
+  border-inline-start-color: var(--border-color__primary--active);
+}
+
+// Focus
+%tab-button--focus-visible {
   outline: 1px solid currentColor;
   outline-offset: -1px;
 }
 
-%tab-caption-close-button {
+// Disabled
+%tab-button--disabled {
+  color: var(--text__disabled);
+}
+
+%tab-button-close-button {
   margin-inline-start: 4px;
 
   &--focus-visible {
@@ -31,26 +78,37 @@
   }
 }
 
-%tab-caption--selected {
-  @extend %tab-caption--active;
-}
-
-%tab-caption--disabled {
-  color: var(--text__disabled);
-}
-
 %tab-list {
   gap: var(--spacing--s);
 }
 
 @mixin tab(
   $tab-selector: ".tab",
-  $tab-caption-selector: ".tab::part(button)",
-  $tab-caption--selected-selector: ".tab::part(button selected)",
-  $tab-caption--disabled-selector: ".tab::part(button disabled)",
-  $tab-caption-close-button-selector: ".tab::part(close-button)",
+  $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-close-button-selector: ".tab::part(close-button)",
   $tab-list-selector: ".tab::part(tab-list)",
   $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
 ) {
@@ -60,44 +118,144 @@
     }
   }
 
-  #{$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-button-block-start--hover;
+      }
 
-    &:hover {
-      @extend %tab-caption--hover;
+      &:active {
+        @extend %tab-button-block-start--active;
+      }
+
+      &:focus-visible {
+        @extend %tab-button--focus-visible;
+      }
     }
 
-    &:active {
-      @extend %tab-caption--active;
+    #{$tab-button-block-start--selected-selector} {
+      @extend %tab-button-block-start--active;
     }
 
-    &:focus-visible {
-      @extend %tab-caption--focus-visible;
+    @if $add--disabled {
+      #{$tab-button-block-start--disabled-selector} {
+        @extend %tab-button--disabled;
+      }
     }
   }
 
-  #{$tab-caption-close-button-selector} {
-    @extend %tab-caption-close-button;
+  // - - - - - - - - - - - - - - - - - - - -
+  //         Tab Button (block-end)
+  // - - - - - - - - - - - - - - - - - - - -
+  @if ($add--tab-button-block-end) {
+    #{$tab-button-block-end-selector} {
+      @extend %tab-button-block;
 
-    &:focus-visible {
-      @extend %tab-caption-close-button--focus-visible;
+      &: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--active;
+    }
+
+    @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--active;
+    }
+
+    @if $add--disabled {
+      #{$tab-button-inline-start--disabled-selector} {
+        @extend %tab-button--disabled;
+      }
+    }
   }
 
-  @if $add--tab-list {
-    #{$tab-list-selector} {
-      @extend %tab-list;
+  // - - - - - - - - - - - - - - - - - - - -
+  //         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--active;
+    }
+
+    @if $add--disabled {
+      #{$tab-button-inline-end--disabled-selector} {
+        @extend %tab-button--disabled;
+      }
     }
   }
 
-  @if $add--disabled {
-    #{$tab-caption--disabled-selector} {
-      @extend %tab-caption--disabled;
+  #{$tab-button-close-button-selector} {
+    @extend %tab-button-close-button;
+
+    &:focus-visible {
+      @extend %tab-button-close-button--focus-visible;
+    }
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //                Tab List
+  // - - - - - - - - - - - - - - - - - - - -
+  @if $add--tab-list {
+    #{$tab-list-selector} {
+      @extend %tab-list;
     }
   }
 }

From 823a0accf399b2bcb68b31461b07e9a6048e9e68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20C=C3=A1mera?= <ncamera@genexus.com>
Date: Mon, 2 Dec 2024 18:25:12 -0300
Subject: [PATCH 2/4] [mercury] Improve tab and flexible-layout styling

---
 .../_flexible-layout-styles.scss              | 370 ++++++++++++++++--
 .../src/components/tab/_tab-styles.scss       | 317 +++++++++++----
 2 files changed, 571 insertions(+), 116 deletions(-)

diff --git a/packages/mercury/src/components/flexible-layout/_flexible-layout-styles.scss b/packages/mercury/src/components/flexible-layout/_flexible-layout-styles.scss
index 489480bdd..5f6d65758 100644
--- a/packages/mercury/src/components/flexible-layout/_flexible-layout-styles.scss
+++ b/packages/mercury/src/components/flexible-layout/_flexible-layout-styles.scss
@@ -1,43 +1,181 @@
 %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: 2px;
+    padding-block: calc(var(--tab-caption__padding-block) - 2px);
+
+    border-block: 2px 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: 2px;
+    padding-inline: calc(var(--tab-caption__padding-inline) - 2px);
+
+    border-inline: 2px 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
     );
   }
@@ -49,48 +187,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)
+  // - - - - - - - - - - - - - - - - - - - -
+  @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)
   // - - - - - - - - - - - - - - - - - - - -
-  #{$tab-caption-selector} {
-    @extend %flexible-layout-tab-caption;
+  @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 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-caption--selected-selector} {
-    @extend %flexible-layout-tab-caption--selected;
+  // - - - - - - - - - - - - - - - - - - - -
+  //         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;
+      }
+    }
   }
 
   // - - - - - - - - - - - - - - - - - - - -
diff --git a/packages/mercury/src/components/tab/_tab-styles.scss b/packages/mercury/src/components/tab/_tab-styles.scss
index 9d62d089a..19baa50e5 100644
--- a/packages/mercury/src/components/tab/_tab-styles.scss
+++ b/packages/mercury/src/components/tab/_tab-styles.scss
@@ -1,6 +1,6 @@
 %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);
@@ -11,47 +11,101 @@
   @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();
+  @include tab-button-border-block-end();
+}
 
-  &--focus-visible {
-    @include focus-outline();
-  }
+%tab-button-inline {
+  @include tab-button-colors-enabled();
+  @include tab-button-font();
+  @include tab-button-gap();
 
-  &--block {
-    @include tab-button-padding-inline();
-    @include tab-button-border-block-end();
-  }
+  @include tab-button-padding-stack();
+  @include tab-button-border-block();
+}
 
-  &--inline {
-    @include tab-button-padding-stack();
-    @include tab-button-border-block();
-  }
+// Block Start
+%tab-button-block-start--hover {
+  @include tab-button-colors-hover();
+}
 
-  &--selected {
-    &-inline {
-      @include tab-button-colors-selected-stack();
-    }
-    &-block {
-      @include tab-button-colors-selected-inline();
-    }
-  }
+%tab-button-block-start--active {
+  // TODO
+  @include tab-button-colors-hover();
+}
+
+%tab-button-block-start--selected {
+  @include tab-button-colors-selected-inline();
+}
+
+// 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();
+}
+
+// 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();
+}
+
+// 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();
+}
+
+// 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;
 
-  &--disabled {
-    @include tab-button-colors-disabled();
-    --tab-caption__border-width: 0;
+  &--hover {
+    background-color: var(--mer-color__tinted-primary--20);
   }
 
-  &__close-button {
-    &--focus {
-      @include focus-outline();
-    }
+  &--focus-visible {
+    @include focus-outline();
   }
 }
 
@@ -69,18 +123,40 @@
 
 @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-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-selector: ".tab::part(tab-list block)",
   $tab-list--inline-selector: ".tab::part(tab-list inline)",
+
   $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
 ) {
@@ -90,62 +166,157 @@
     }
   }
 
-  #{$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--active;
     }
-  }
 
-  #{$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-caption--selected-selector} {
-    @extend %tab-caption--selected;
+    #{$tab-button-block-end--selected-selector} {
+      @extend %tab-button-block-end--active;
+    }
+
+    @if $add--disabled {
+      #{$tab-button-block-end--disabled-selector} {
+        @extend %tab-button--disabled;
+      }
+    }
   }
 
-  #{$tab-caption--selected-inline-selector} {
-    @extend %tab-caption--selected-inline;
+  // - - - - - - - - - - - - - - - - - - - -
+  //        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--active;
+    }
+
+    @if $add--disabled {
+      #{$tab-button-inline-start--disabled-selector} {
+        @extend %tab-button--disabled;
+      }
+    }
   }
 
-  #{$tab-caption--selected-block-selector} {
-    @extend %tab-caption--selected-block;
+  // - - - - - - - - - - - - - - - - - - - -
+  //         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--active;
+    }
+
+    @if $add--disabled {
+      #{$tab-button-inline-end--disabled-selector} {
+        @extend %tab-button--disabled;
+      }
+    }
   }
 
-  #{$tab-caption__close-button-selector} {
+  #{$tab-button-close-button-selector} {
+    @extend %tab-button-close-button;
+
     &: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-button-close-button-selector} {
+    @extend %tab-button-close-button;
+
+    &:hover {
+      @extend %tab-button-close-button--hover;
     }
-  }
 
-  #{$tab-list--block-selector} {
-    @extend %tab-list--block;
+    &:focus-visible {
+      @extend %tab-button-close-button--focus-visible;
+    }
   }
 
-  #{$tab-list--inline-selector} {
-    @extend %tab-list--inline;
-  }
+  @if $add--tab-list {
+    #{$tab-list--block-selector} {
+      @extend %tab-list--block;
+    }
 
-  @if $add--disabled {
-    #{$tab-caption--disabled-selector} {
-      @extend %tab-caption--disabled;
+    #{$tab-list--inline-selector} {
+      @extend %tab-list--inline;
     }
   }
 }

From 0fba8c3f8b2ea99505414b56388aa519033736b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20C=C3=A1mera?= <ncamera@genexus.com>
Date: Mon, 2 Dec 2024 23:58:15 -0300
Subject: [PATCH 3/4] Improve tab styles

---
 .../_flexible-layout-styles.scss              | 12 ++--
 .../src/components/tab/_tab-styles.scss       | 60 ++++++++++++++-----
 2 files changed, 52 insertions(+), 20 deletions(-)

diff --git a/packages/mercury/src/components/flexible-layout/_flexible-layout-styles.scss b/packages/mercury/src/components/flexible-layout/_flexible-layout-styles.scss
index 5f6d65758..d5060d6d0 100644
--- a/packages/mercury/src/components/flexible-layout/_flexible-layout-styles.scss
+++ b/packages/mercury/src/components/flexible-layout/_flexible-layout-styles.scss
@@ -46,10 +46,10 @@
 
     padding-inline: var(--tab-caption__padding-inline);
 
-    // Due to border-block-width: 2px;
-    padding-block: calc(var(--tab-caption__padding-block) - 2px);
+    // Due to border-block-width: 1px;
+    padding-block: calc(var(--tab-caption__padding-block) - 1px);
 
-    border-block: 2px solid transparent;
+    border-block: 1px solid transparent;
   }
 
   &-tab-button-inline {
@@ -59,10 +59,10 @@
 
     padding-block: var(--tab-caption__padding-block);
 
-    // Due to border-inline-width: 2px;
-    padding-inline: calc(var(--tab-caption__padding-inline) - 2px);
+    // Due to border-inline-width: 1px;
+    padding-inline: calc(var(--tab-caption__padding-inline) - 1px);
 
-    border-inline: 2px solid transparent;
+    border-inline: 1px solid transparent;
   }
 
   // Block Start
diff --git a/packages/mercury/src/components/tab/_tab-styles.scss b/packages/mercury/src/components/tab/_tab-styles.scss
index 19baa50e5..ab80170aa 100644
--- a/packages/mercury/src/components/tab/_tab-styles.scss
+++ b/packages/mercury/src/components/tab/_tab-styles.scss
@@ -17,7 +17,11 @@
   @include tab-button-gap();
 
   @include tab-button-padding-inline();
-  @include tab-button-border-block-end();
+  border-block: var(--tab-caption__border-width)
+    var(--tab-caption__border-style) transparent;
+
+  // TODO: Remove this mixin
+  // @include tab-button-border-block-end();
 }
 
 %tab-button-inline {
@@ -26,7 +30,11 @@
   @include tab-button-gap();
 
   @include tab-button-padding-stack();
-  @include tab-button-border-block();
+  border-inline: var(--tab-caption__border-width)
+    var(--tab-caption__border-style) transparent;
+
+  // TODO: Remove this mixin
+  // @include tab-button-border-block();
 }
 
 // Block Start
@@ -41,6 +49,7 @@
 
 %tab-button-block-start--selected {
   @include tab-button-colors-selected-inline();
+  border-block-end-color: var(--tab-caption__border-color);
 }
 
 // Block End
@@ -55,6 +64,7 @@
 
 %tab-button-block-end--selected {
   @include tab-button-colors-selected-inline();
+  border-block-start-color: var(--tab-caption__border-color);
 }
 
 // Inline Start
@@ -69,6 +79,7 @@
 
 %tab-button-inline-start--selected {
   @include tab-button-colors-selected-stack();
+  border-inline-end-color: var(--tab-caption__border-color);
 }
 
 // Inline End
@@ -83,6 +94,7 @@
 
 %tab-button-inline-end--selected {
   @include tab-button-colors-selected-stack();
+  border-inline-start-color: var(--tab-caption__border-color);
 }
 
 // Focus
@@ -110,15 +122,25 @@
 }
 
 %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(
@@ -149,8 +171,10 @@
   $tab-button--disabled-selector: ".tab::part(tab disabled)",
   $tab-button-close-button-selector: ".tab::part(close-button)",
 
-  $tab-list--block-selector: ".tab::part(tab-list block)",
-  $tab-list--inline-selector: ".tab::part(tab-list inline)",
+  $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,
@@ -187,7 +211,7 @@
     }
 
     #{$tab-button-block-start--selected-selector} {
-      @extend %tab-button-block-start--active;
+      @extend %tab-button-block-start--selected;
     }
 
     @if $add--disabled {
@@ -218,7 +242,7 @@
     }
 
     #{$tab-button-block-end--selected-selector} {
-      @extend %tab-button-block-end--active;
+      @extend %tab-button-block-end--selected;
     }
 
     @if $add--disabled {
@@ -249,7 +273,7 @@
     }
 
     #{$tab-button-inline-start--selected-selector} {
-      @extend %tab-button-inline-start--active;
+      @extend %tab-button-inline-start--selected;
     }
 
     @if $add--disabled {
@@ -280,7 +304,7 @@
     }
 
     #{$tab-button-inline-end--selected-selector} {
-      @extend %tab-button-inline-end--active;
+      @extend %tab-button-inline-end--selected;
     }
 
     @if $add--disabled {
@@ -311,12 +335,20 @@
   }
 
   @if $add--tab-list {
-    #{$tab-list--block-selector} {
-      @extend %tab-list--block;
+    #{$tab-list--block-start-selector} {
+      @extend %tab-list--block-start;
+    }
+
+    #{$tab-list--block-end-selector} {
+      @extend %tab-list--block-end;
+    }
+
+    #{$tab-list--inline-start-selector} {
+      @extend %tab-list--inline-start;
     }
 
-    #{$tab-list--inline-selector} {
-      @extend %tab-list--inline;
+    #{$tab-list--inline-end-selector} {
+      @extend %tab-list--inline-end;
     }
   }
 }

From 9c9f1fc0c641b315d8615b6cfee74def248bc522 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20C=C3=A1mera?= <ncamera@genexus.com>
Date: Mon, 2 Dec 2024 23:58:29 -0300
Subject: [PATCH 4/4] Improve close button styles

---
 .../src/components/_flexible-layout.scss      | 22 ++++++++++---------
 packages/unanimo/src/components/_tab.scss     |  9 ++++++++
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/unanimo/src/components/_flexible-layout.scss b/packages/unanimo/src/components/_flexible-layout.scss
index 8a80c276f..29b108cf0 100644
--- a/packages/unanimo/src/components/_flexible-layout.scss
+++ b/packages/unanimo/src/components/_flexible-layout.scss
@@ -167,26 +167,31 @@
 @mixin flexible-layout(
   $flexible-layout-selector: ".flexible-layout",
   $tab-selector: ".flexible-layout::part(leaf)",
+
   $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-start-selector:
     ".flexible-layout::part(tab-list inline-start)",
@@ -218,9 +223,6 @@
     $add--disabled: $add--disabled
   );
 
-  // AGREGAR CLASES PARA EL FLEXIBLE LAYOUT CAMBIANDO LA POSICION DEL BORDE y USANDO EL BACKGROUND COLOR COMO LA SUPERFICIE
-  // AGREGAR CUSTOM VAR PARA DETERMINAR EL BACKGROUND COLOR DE SELECCION
-
   // - - - - - - - - - - - - - - - - - - - -
   //        Tab Button (block-start)
   // - - - - - - - - - - - - - - - - - - - -
@@ -241,15 +243,15 @@
         @extend %tab-button--focus-visible;
       }
     }
-  }
 
-  #{$tab-button-block-start--selected-selector} {
-    @extend %flexible-layout-tab-button-block-start--selected;
-  }
+    #{$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;
+    @if $add--disabled {
+      #{$tab-button-block-start--disabled-selector} {
+        @extend %flexible-layout-tab-button--disabled;
+      }
     }
   }
 
diff --git a/packages/unanimo/src/components/_tab.scss b/packages/unanimo/src/components/_tab.scss
index 485cbe2dd..44081bb79 100644
--- a/packages/unanimo/src/components/_tab.scss
+++ b/packages/unanimo/src/components/_tab.scss
@@ -72,6 +72,11 @@
 
 %tab-button-close-button {
   margin-inline-start: 4px;
+  border-radius: 4px;
+
+  &--hover {
+    background-color: var(--colors-foundation__purple--10);
+  }
 
   &--focus-visible {
     outline: 1px solid currentColor;
@@ -245,6 +250,10 @@
   #{$tab-button-close-button-selector} {
     @extend %tab-button-close-button;
 
+    &:hover {
+      @extend %tab-button-close-button--hover;
+    }
+
     &:focus-visible {
       @extend %tab-button-close-button--focus-visible;
     }