@genexus/mercury 0.9.18 → 0.11.0

package/dist/mercury.scss

@@ -5131,11 +5131,68 @@
   @include control-font-size-regular();
   @include control-padding-inline-block();
 
-  &:hover {
+  &--hover {
     @include control-colors-hover();
   }
 
+  &--focus {
+    @include focus-border();
+  }
+
+  &--disabled {
+    @include control-colors-disabled();
+  }
+
+  &--error {
+    @include control-colors-error();
+  }
+
+  &__window {
+    @include items-container-border();
+    @include items-container-border-radius();
+    @include items-container-colors();
+    @include items-container-padding();
+    @include items-container-gap();
+    @include items-container-max-height();
+    @include items-container-dropdown();
+  }
+
+  &-group__header {
+    @include item-colors-enabled();
+    @include item-font-header();
+    @include item-padding();
+
+    &--expandable {
+      @include item-colors-enabled();
+      @include item-font-header();
+      @include item-padding();
+      @include item-border-radius();
+
+      &-hover {
+        @include item-colors-hover();
+      }
+    }
+
+    &--disabled {
+      @include item-colors-disabled();
+    }
+  }
+
+  &-group {
+    @include items-container-gap();
+
+    &__content {
+      @include items-container-gap();
+    }
+  }
+
   &__item {
+    @include item-colors-enabled();
+    @include item-border();
+    @include item-border-radius();
+    @include item-font();
+    @include item-padding();
+
     &--nested {
       padding-inline-start: calc(
         var(--ch-combo-box-item-gap) +
@@ -5143,6 +5200,14 @@
           var(--mer-spacing--2xs)
       );
     }
+
+    &--selected {
+      @include item-colors-selected();
+    }
+
+    &--disabled {
+      @include item-colors-disabled();
+    }
   }
 }
 
@@ -5163,13 +5228,13 @@
 /// @param {String} $item--selected-selector [".combo-box::part(item selected)"] -
 /// @param {Boolean} $add--disabled [true] -
 /// @param {Boolean} $add--placeholder [true] -
-/// @param {Boolean} $add--placeholder-var [true] -
 /// @param {Boolean} $add--error [true] -
 @mixin combo-box(
   $combo-box-selector: ".combo-box",
   $combo-box--disabled-selector: ".combo-box[disabled]",
   $combo-box--error-selector: ".combo-box-error",
-  $combo-box__placeholder-selector: ".combo-box::part(placeholder)",
+  $combo-box__placeholder-selector:
+    ".combo-box[part='ch-combo-box--empty-value']",
   $window-selector: ".combo-box::part(window)",
   $group-selector: ".combo-box::part(group)",
   $group__content-selector: ".combo-box::part(group__content)",
@@ -5183,17 +5248,17 @@
   $item--selected-selector: ".combo-box::part(item selected)",
   $add--disabled: true,
   $add--placeholder: true,
-  $add--placeholder-var: true,
   $add--error: true
 ) {
   #{$combo-box-selector} {
     @extend %combo-box;
 
-    &:focus {
-      @include focus-border();
+    &:hover {
+      @extend %combo-box--hover;
     }
 
-    @if $add--placeholder-var {
+    &:focus {
+      @extend %combo-box--focus;
     }
   }
 
@@ -5203,74 +5268,41 @@
     }
   }
 
-  @if $add--disabled {
-    #{$combo-box--disabled-selector} {
-      @include control-colors-disabled();
-    }
-
-    #{$group__header--disabled-selector} {
-      @include item-colors-disabled();
-    }
-
-    #{$item--disabled-selector} {
-      @include item-colors-disabled();
-    }
-  }
-
-  @if $add--error {
-    #{$combo-box--error-selector} {
-      @include control-colors-error();
-    }
-  }
-
   // - - - - - - - - - - - - - - - - - - - -
   //                 Window
   // - - - - - - - - - - - - - - - - - - - -
   #{$window-selector} {
-    @include items-container-border();
-    @include items-container-border-radius();
-    @include items-container-colors();
-    @include items-container-padding();
-    @include items-container-gap();
-    @include items-container-max-height();
-    @include items-container-dropdown();
+    @extend %combo-box__window;
   }
 
   // - - - - - - - - - - - - - - - - - - - -
   //                  Group
   // - - - - - - - - - - - - - - - - - - - -
   #{$group__header-selector} {
-    @include item-colors-enabled();
-    @include item-font-header();
-    @include item-padding();
+    @extend %combo-box-group__header;
   }
 
   #{$group__header--expandable-selector} {
-    @include item-colors-enabled();
-    @include item-font-header();
-    @include item-padding();
-    @include item-border-radius();
+    @extend %combo-box-group__header--expandable;
 
     &:hover {
-      @include item-colors-hover();
+      @extend %combo-box-group__header--expandable-hover;
     }
   }
+
   #{$group-selector} {
-    @include items-container-gap();
+    @extend %combo-box-group;
   }
+
   #{$group__content-selector} {
-    @include items-container-gap();
+    @extend %combo-box-group__content;
   }
 
   // - - - - - - - - - - - - - - - - - - - -
   //                  Item
   // - - - - - - - - - - - - - - - - - - - -
   #{$item-selector} {
-    @include item-colors-enabled();
-    @include item-border();
-    @include item-border-radius();
-    @include item-font();
-    @include item-padding();
+    @extend %combo-box__item;
   }
 
   #{$item--nested-selector} {
@@ -5278,7 +5310,30 @@
   }
 
   #{$item--selected-selector} {
-    @include item-colors-selected();
+    @extend %combo-box__item--selected;
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //                Disabled
+  // - - - - - - - - - - - - - - - - - - - -
+  @if $add--disabled {
+    #{$combo-box--disabled-selector} {
+      @extend %combo-box--disabled;
+    }
+
+    #{$group__header--disabled-selector} {
+      @extend %combo-box-group__header--disabled;
+    }
+
+    #{$item--disabled-selector} {
+      @extend %combo-box__item--disabled;
+    }
+  }
+
+  @if $add--error {
+    #{$combo-box--error-selector} {
+      @extend %combo-box--error;
+    }
   }
 }
 
@@ -5461,45 +5516,189 @@
 }
 
 %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: var(--mer-spacing--md);
+    --ch-tab-image-size: var(--mer-icon__box--md);
+
+    --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;
+  }
+
+  // Style for the button of the selected tab
+  &-tab-button--selected-before {
+    color: var(--mer-accent__primary);
+  }
+
+  // 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 +5710,202 @@
 
 @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;
+
+      &::before {
+        @extend %flexible-layout-tab-button--selected-before;
+      }
+    }
+
+    @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;
+
+      &::before {
+        @extend %flexible-layout-tab-button--selected-before;
+      }
+    }
+
+    @if $add--disabled {
+      #{$tab-button-block-end--disabled-selector} {
+        @extend %flexible-layout-tab-button--disabled;
+      }
+    }
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //        Tab Button (inline-start)
   // - - - - - - - - - - - - - - - - - - - -
-  #{$tab-caption-selector} {
-    @extend %flexible-layout-tab-caption;
+  @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;
+      }
+    }
   }
 
   // - - - - - - - - - - - - - - - - - - - -
@@ -5669,6 +6022,18 @@
   }
 }
 
+%layout-splitter {
+  &-bar {
+    color: var(--mer-border-color__on-surface);
+  }
+}
+
+@mixin layout-splitter($bar-selector: ".layout-splitter::part(bar)") {
+  #{$bar-selector} {
+    @extend %layout-splitter-bar;
+  }
+}
+
 %list-box {
   --ch-action-list-group__expandable-button-image-size: var(
     --mer-icon__box--md
@@ -6134,18 +6499,20 @@
   --ch-navigation-list-item__tooltip-separation-x: var(--mer-spacing--2xs);
 
   --ch-navigation-list-item-custom-padding-inline-start: calc(
-    var(--mer-spacing--xs) + var(--mer-spacing--3xs)
+    var(--mer-spacing--xs) - 1px
   );
   --ch-navigation-list-item-gap: var(--mer-spacing--xs);
   --ch-navigation-list-item-expand-collapse-duration: 200ms;
 
-  --ch-navigation-list-item__image-size: 20px;
+  --ch-navigation-list-item__image-size: var(--mer-spacing--md);
   --ch-navigation-list-item__expandable-button-size: 20px;
   --ch-navigation-list-item__expandable-button-image-size: calc(
     var(--mer-spacing--md) - var(--mer-spacing--3xs)
   );
 
   color: var(--item__color);
+  line-height: var(--mer-spacing--md);
+  gap: var(--mer-spacing--sm);
 
   &-item-action {
     padding-block: var(--mer-spacing--xs);
@@ -6155,8 +6522,9 @@
   &-item-tooltip {
     padding-block: var(--mer-spacing--2xs);
     padding-inline: var(--mer-spacing--xs);
-    background-color: var(--mer-color__neutral-gray--800);
+    background-color: var(--mer-color__neutral-gray--1000);
     border-radius: var(--mer-border__radius--sm);
+    box-shadow: 4px 4px 12px 0px #00000033;
     color: var(--mer-color__neutral-gray--300);
     font-size: var(--mer-font__size--xs);
   }
@@ -6175,12 +6543,19 @@
   }
 
   &-item-link {
+    padding-inline-end: calc(var(--mer-spacing--xs) - 1px);
+    padding-block: calc(var(--mer-spacing--xs) - 1px);
+    border: 1px solid transparent;
+    border-radius: 4px;
+
     &--selected {
-      background-color: var(--item__bg-color--selected-hover);
+      background-color: var(--item__bg-color--selected);
+      border-color: var(--item__border-color--selected);
+      color: var(--mer-accent__primary);
     }
 
     &--hover-not-selected {
-      background-color: var(--item__bg-color--hover);
+      color: var(--mer-accent__primary);
     }
   }
 }
@@ -6189,6 +6564,7 @@
   $navigation-list-selector: ".navigation-list",
   $item-action-selector: ".navigation-list::part(item__action)",
   $item-button-selector: ".navigation-list::part(item__button)",
+  $item-link-selector: ".navigation-list::part(item__link)",
   $item-link-not-selected-selector:
     ".navigation-list::part(item__link not-selected)",
   $item-link-selected-selector: ".navigation-list::part(item__link selected)",
@@ -6214,6 +6590,10 @@
     @extend %navigation-list-item-link--selected;
   }
 
+  #{$item-link-selector} {
+    @extend %navigation-list-item-link;
+  }
+
   #{$item-link-not-selected-selector}:hover {
     @extend %navigation-list-item-link--hover-not-selected;
   }
@@ -8177,6 +8557,7 @@
       ) / 2
   );
 
+  // TODO: Remove this background-color. The elevation must determine the color
   background-color: var(--mer-color__neutral-gray--800);
   overflow: hidden;
 
@@ -8350,6 +8731,14 @@
 }
 
 %slider__thumb {
+  &--hover {
+    --ch-slider-thumb-background-color: var(--mer-color__primary--600);
+  }
+
+  &--active-focus {
+    --ch-slider-thumb-background-color: var(--mer-color__primary--600);
+    @include focus-outline();
+  }
 }
 
 /// @group Slider
@@ -8387,12 +8776,18 @@
 @mixin slider(
   $slider-selector: ".slider",
   $track-selector: ".slider::part(track)",
-  $thumb-selector: ".slider::part(thumb)",
-  $thumb-focus-selector: ".slider:focus-visible::part(thumb focus)"
+  $thumb-active-selector: ".slider:active::part(thumb)",
+  $thumb-focus-selector: ".slider:focus::part(thumb)"
 ) {
   #{$slider-selector} {
     @extend %slider__slider;
+
+    &:hover {
+      @extend %slider__thumb--hover;
+    }
   }
+
+  // TODO: TEST THIS
   #{$slider-selector}:disabled {
     @extend %slider__slider--disabled;
   }
@@ -8401,18 +8796,19 @@
     @extend %slider__track;
   }
 
-  #{$thumb-selector} {
-    @extend %slider__thumb;
+  #{$thumb-active-selector} {
+    @extend %slider__thumb--active-focus;
   }
 
   #{$thumb-focus-selector} {
-    @include focus-outline();
+    @extend %slider__thumb--active-focus;
   }
 }
 
 %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: var(--mer-spacing--md);
+  --ch-tab-image-size: var(--mer-icon__box--md);
 
   --spacing-body-block-start: var(--mer-spacing--md);
   --spacing-body-block-end: var(--mer-spacing--md);
@@ -8423,76 +8819,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 +8998,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;
     }
   }
 }
@@ -9796,6 +10395,148 @@
   }
 }
 
+%toggle-basic {
+  --ch-switch-track__unchecked-background-color: var(
+    --mer-color__neutral-gray--650
+  );
+  --ch-switch-track__checked-background-color: var(
+    --mer-color__tinted-primary--50
+  );
+  --ch-switch-thumb__unchecked-background-color: var(--mer-icon__neutral);
+  --ch-switch-thumb__checked-background-color: var(--mer-icon__neutral);
+  --ch-switch-thumb__state-transition-duration: 150ms;
+
+  &__track {
+    border-radius: var(--ch-switch-track-block-size);
+    margin-inline-end: var(--mer-spacing--xs);
+
+    &--disabled {
+      --ch-switch-track__unchecked-background-color: var(
+        --mer-accent__primary--disabled
+      );
+      --ch-switch-track__checked-background-color: var(
+        --mer-accent__primary--disabled
+      );
+      --ch-switch-thumb__unchecked-background-color: var(
+        --mer-icon__on-disabled
+      );
+      --ch-switch-thumb__checked-background-color: var(--mer-icon__on-disabled);
+    }
+  }
+
+  &__caption {
+    &--checked {
+      font-weight: 600;
+    }
+  }
+}
+
+%toggle-small {
+  --ch-switch-track-block-size: 16px;
+  --ch-switch-track-inline-size: 31px;
+  --ch-switch-thumb-size: 9px;
+
+  &__thumb {
+    &--unchecked {
+      inset-inline-start: 4px;
+    }
+
+    &--checked {
+      inset-inline-start: calc(100% - var(--ch-switch-thumb-size) - 4px);
+    }
+  }
+}
+
+%toggle-large {
+  --ch-switch-track-block-size: 26px;
+  --ch-switch-track-inline-size: 50px;
+  --ch-switch-thumb-size: 16px;
+
+  &__thumb {
+    &--unchecked {
+      inset-inline-start: 6px;
+    }
+
+    &--checked {
+      inset-inline-start: calc(100% - var(--ch-switch-thumb-size) - 6px);
+    }
+  }
+}
+
+@mixin toggle-small(
+  $toggle-selector: ".toggle-small",
+  $track-selector: ".toggle-small::part(track)",
+  $track--disabled-selector: ".toggle-small::part(track disabled)",
+  $thumb--unchecked-selector: ".toggle-small::part(thumb unchecked)",
+  $thumb--checked-selector: ".toggle-small::part(thumb checked)",
+  $caption--checked-selector: ".toggle-small::part(caption checked)",
+  $add--disabled: true
+) {
+  #{$toggle-selector} {
+    @extend %toggle-basic;
+    @extend %toggle-small;
+  }
+
+  #{$track-selector} {
+    @extend %toggle-basic__track;
+  }
+
+  @if $add--disabled {
+    #{$track--disabled-selector} {
+      @extend %toggle-basic__track--disabled;
+    }
+  }
+
+  #{$thumb--unchecked-selector} {
+    @extend %toggle-small__thumb--unchecked;
+  }
+
+  #{$thumb--checked-selector} {
+    @extend %toggle-small__thumb--checked;
+  }
+
+  #{$caption--checked-selector} {
+    @extend %toggle-basic__caption--checked;
+  }
+}
+
+@mixin toggle-large(
+  $toggle-selector: ".toggle-large",
+  $track-selector: ".toggle-large::part(track)",
+  $track--disabled-selector: ".toggle-large::part(track disabled)",
+  $thumb--unchecked-selector: ".toggle-large::part(thumb unchecked)",
+  $thumb--checked-selector: ".toggle-large::part(thumb checked)",
+  $caption--checked-selector: ".toggle-large::part(caption checked)",
+  $add--disabled: true
+) {
+  #{$toggle-selector} {
+    @extend %toggle-basic;
+    @extend %toggle-large;
+  }
+
+  #{$track-selector} {
+    @extend %toggle-basic__track;
+  }
+
+  @if $add--disabled {
+    #{$track--disabled-selector} {
+      @extend %toggle-basic__track--disabled;
+    }
+  }
+
+  #{$thumb--unchecked-selector} {
+    @extend %toggle-large__thumb--unchecked;
+  }
+
+  #{$thumb--checked-selector} {
+    @extend %toggle-large__thumb--checked;
+  }
+
+  #{$caption--checked-selector} {
+    @extend %toggle-basic__caption--checked;
+  }
+}
+
 @mixin tooltip-tokens() {
   --tooltip__background-color: var(--mer-color__neutral-gray--1000);
   --tooltip__border-radius: var(--mer-border__radius--sm);
@@ -10223,6 +10964,7 @@
   $edit: true,
   $flexible-layout: true,
   $icon: true,
+  $layout-splitter: true,
   $list-box: true,
   $markdown-viewer: true,
   $navigation-list: true,
@@ -10234,6 +10976,7 @@
   $tab: true,
   $tabular-grid: true,
   $ticket-list: true,
+  $toggle: true,
   $tooltip: true,
   $tree-view: true,
   $widget: true
@@ -18550,6 +19293,10 @@
     @include icon();
   }
 
+  @if $layout-splitter {
+    @include layout-splitter();
+  }
+
   @if $list-box {
     @include list-box();
   }
@@ -18596,6 +19343,11 @@
     @include ticket-list();
   }
 
+  @if $toggle {
+    @include toggle-small();
+    @include toggle-large();
+  }
+
   @if $tooltip {
     @include tooltip();
   }
@@ -18666,6 +19418,7 @@
   $edit: false,
   $flexible-layout: false,
   $icon: false,
+  $layout-splitter: false,
   $list-box: false,
   $markdown-viewer: false,
   $navigation-list: false,
@@ -18677,6 +19430,7 @@
   $tab: false,
   $tabular-grid: false,
   $ticket-list: false,
+  $toggle: false,
   $tooltip: false,
   $tree-view: false,
   $widget: false
@@ -18738,6 +19492,7 @@
     $edit: $edit,
     $flexible-layout: $flexible-layout,
     $icon: $icon,
+    $layout-splitter: $layout-splitter,
     $list-box: $list-box,
     $markdown-viewer: $markdown-viewer,
     $navigation-list: $navigation-list,
@@ -18749,6 +19504,7 @@
     $tab: $tab,
     $tabular-grid: $tabular-grid,
     $ticket-list: $ticket-list,
+    $toggle: $toggle,
     $tooltip: $tooltip,
     $tree-view: $tree-view,
     $widget: $widget