Fix placements

CHANGELOG.md

@@ -9,6 +9,7 @@
 - Fixed a bug where `slBlur` and `slFocus` were emitted twice in `sl-select`
 - Fixed a bug where clicking on `sl-menu` wouldn't focus it
 - Fixed a bug in the popover utility where `onAfterShow` would fire too soon
+- Fixed a bug where `bottom` and `right` placements didn't render properly in `sl-tab-group`
 - Improved keyboard logic in `sl-dropdown`, `sl-menu`, and `sl-select`
 - Updated `sl-animation` to stable
 - Updated to Stencil 2.0 (you may need to purge `node_modules` and run `npm install` after pulling)

src/components/tab-group/tab-group.scss

@@ -61,9 +61,12 @@
 .tab-group--top {
   flex-direction: column;
 
+  .tab-group__nav-container {
+    order: 1;
+  }
+
   .tab-group__nav {
     display: flex;
-    order: 1;
     overflow-x: auto;
     @include hide-scrollbar();
   }
@@ -92,9 +95,12 @@
 .tab-group--bottom {
   flex-direction: column;
 
+  .tab-group__nav-container {
+    order: 2;
+  }
+
   .tab-group__nav {
     display: flex;
-    order: 2;
     overflow-x: auto;
     @include hide-scrollbar();
   }
@@ -123,7 +129,7 @@
 .tab-group--left {
   flex-direction: row;
 
-  .tab-group__nav {
+  .tab-group__nav-container {
     order: 1;
   }
 
@@ -151,7 +157,7 @@
 .tab-group--right {
   flex-direction: row;
 
-  .tab-group__nav {
+  .tab-group__nav-container {
     order: 2;
   }