adding

dist/index.html

@@ -43,7 +43,7 @@
                 <button class="button button--danger">
                     Danger
                 </button>
-                <button class="button button--hover">
+                <button class="button button--selected">
                     Hover
                 </button>
             </div>
@@ -130,21 +130,23 @@
                 <h2>Panel</h2>
 
                 <div class="panel">
-                    <div class="panel__header">
-                        <button type="button">
-                            <svg class="icon icon--first" aria-hidden="true">
-                                <use xlink:href="symbol-defs.svg#icon-expand"></use>
-                            </svg>
-                        </button>
-                        <div class="panel__title">Test</div>
-                        <div class="panel__buttons">
-                            <button type="button">
-                                <svg class="icon" aria-hidden="true">
+                    <div class="bar">
+                        <div class="bar__start">
+                            <button type="button" class="button button--no-style">
+                                <svg class="icon fill-white" aria-hidden="true">
+                                    <use xlink:href="symbol-defs.svg#icon-expand"></use>
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="bar__main">Test</div>
+                        <div class="bar__end">
+                            <button type="button" class="button button--no-style">
+                                <svg class="icon fill-white" aria-hidden="true">
                                     <use xlink:href="symbol-defs.svg#icon-edit"></use>
                                 </svg>
                             </button>
-                            <button type="button">
-                                <svg class="icon" aria-hidden="true">
+                            <button type="button" class="button button--no-style">
+                                <svg class="icon fill-white" aria-hidden="true">
                                     <use xlink:href="symbol-defs.svg#icon-close"></use>
                                 </svg>
                             </button>

dist/plain-ui.css

@@ -943,13 +943,19 @@ img.media {
 }
 .bar__start {
   justify-content: start;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 .bar__main {
   width: 100%;
 }
 .bar__end {
-  justify-content: end;
+  text-align: right;
   margin-left: 0.75em;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 .bar__start, .bar__main, .bar__end {
   align-self: center;
@@ -974,9 +980,6 @@ img.media {
   border: 1px solid #3e3e3e;
   border-right: 0;
 }
-.tab__item:last-child {
-  margin-right: 0;
-}
 .tab__item:hover, .tab__item--selected {
   cursor: pointer;
   background-color: #585858;

src/scss/components/_bar.scss

@@ -20,6 +20,7 @@
 
         &__start {
             justify-content: start;
+            width: fit-content;
         }
 
         &__main {
@@ -27,8 +28,9 @@
         }
 
         &__end {
-            justify-content: end;
+            text-align: right;
             margin-left: 0.75em;
+            width: fit-content;
         }
 
         &__start, &__main, &__end {

src/scss/components/_tabs.scss

@@ -25,10 +25,6 @@
             border: 1px solid $plain-ui__primary-light;
             border-right: 0;
 
-            &:last-child {
-                margin-right: 0;
-            }
-
             &:hover, &--selected {
                 cursor: pointer;
                 background-color: lighten($plain-ui__primary-light, 10%);