semrush · ilyabrower · Jul 22, 2026 · Jul 22, 2026 · Aug 4, 2026 · Aug 5, 2026
diff --git a/...lineFH-Verify-Tabline-disabled-false-size-l-showBadge-true-1-chromium-linux.png b/...lineFH-Verify-Tabline-disabled-false-size-l-showBadge-true-1-chromium-linux.png
diff --git a/...blineFH-Verify-Tabline-disabled-false-size-l-showBadge-true-1-firefox-linux.png b/...blineFH-Verify-Tabline-disabled-false-size-l-showBadge-true-1-firefox-linux.png
diff --git a/...ablineFH-Verify-Tabline-disabled-false-size-l-showBadge-true-1-webkit-linux.png b/...ablineFH-Verify-Tabline-disabled-false-size-l-showBadge-true-1-webkit-linux.png
diff --git a/...H-Verify-Tabline-disabled-false-size-m-showBadge-undefined-1-chromium-linux.png b/...H-Verify-Tabline-disabled-false-size-m-showBadge-undefined-1-chromium-linux.png
diff --git a/...FH-Verify-Tabline-disabled-false-size-m-showBadge-undefined-1-firefox-linux.png b/...FH-Verify-Tabline-disabled-false-size-m-showBadge-undefined-1-firefox-linux.png
diff --git a/...eFH-Verify-Tabline-disabled-false-size-m-showBadge-undefined-1-webkit-linux.png b/...eFH-Verify-Tabline-disabled-false-size-m-showBadge-undefined-1-webkit-linux.png
diff --git a/...blineFH-Verify-Tabline-disabled-true-size-l-showBadge-true-1-chromium-linux.png b/...blineFH-Verify-Tabline-disabled-true-size-l-showBadge-true-1-chromium-linux.png
diff --git a/...ablineFH-Verify-Tabline-disabled-true-size-l-showBadge-true-1-firefox-linux.png b/...ablineFH-Verify-Tabline-disabled-true-size-l-showBadge-true-1-firefox-linux.png
diff --git a/...TablineFH-Verify-Tabline-disabled-true-size-l-showBadge-true-1-webkit-linux.png b/...TablineFH-Verify-Tabline-disabled-true-size-l-showBadge-true-1-webkit-linux.png
diff --git a/...FH-Verify-Tabline-disabled-true-size-m-showBadge-undefined-1-chromium-linux.png b/...FH-Verify-Tabline-disabled-true-size-m-showBadge-undefined-1-chromium-linux.png
diff --git a/...eFH-Verify-Tabline-disabled-true-size-m-showBadge-undefined-1-firefox-linux.png b/...eFH-Verify-Tabline-disabled-true-size-m-showBadge-undefined-1-firefox-linux.png
diff --git a/...neFH-Verify-Tabline-disabled-true-size-m-showBadge-undefined-1-webkit-linux.png b/...neFH-Verify-Tabline-disabled-true-size-m-showBadge-undefined-1-webkit-linux.png
diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx b/semcore/tab-line/__tests__/tab-line.browser-test.tsx
@@ -47,28 +47,28 @@ test.describe(`${TAG.VISUAL} `, () => {
       const l_size = page.locator('[data-ui-name="TabLine"][class*="size_l"]');
 
       await test.step('Verify tab line styles styles', async () => {
-        const countText = await locators.text(page).count();
-        for (let i = 0; i < countText - 2; i++) {
-          await expect(locators.text(page).nth(i)).toHaveCSS('margin-right', '8px');
-        }
-        await expect(locators.text(page).nth(countText - 2)).not.toHaveCSS('margin-right', '8px');
-        await expect(locators.text(page).nth(countText - 1)).not.toHaveCSS('margin-right', '8px');
+        // Spacing between tabs comes from the tablist gap and depends on the size
+        await expect(locators.tabLine(page)).toHaveCSS('column-gap', item.size === 'l' ? '20px' : '16px');
 
         const countTabs = await locators.tabLines(page).count();
-        for (let i = 0; i < countTabs - 1; i++) {
-          await expect(locators.tabLines(page).nth(i)).toHaveCSS('margin-right', '16px');
+        for (let i = 0; i < countTabs; i++) {
+          // Spacing between an addon and the text comes from the tab gap
+          await expect(locators.tabLines(page).nth(i)).toHaveCSS('column-gap', '6px');
+          await expect(locators.tabLines(page).nth(i)).toHaveCSS('margin-right', '0px');
         }
-        await expect(locators.tabLines(page).nth(countTabs - 1)).not.toHaveCSS('margin-right', '16px');
 
-        await expect(locators.addons(page).nth(0)).toHaveCSS('margin-right', '8px');
-        await expect(locators.addons(page).nth(2)).toHaveCSS('margin-right', '8px');
-        await expect(locators.addons(page).nth(4)).toHaveCSS('margin-right', '8px');
-        await expect(locators.addons(page).nth(7)).toHaveCSS('margin-right', '8px');
+        // Per-child margins were replaced by the gaps above and must not come back
+        const countText = await locators.text(page).count();
+        for (let i = 0; i < countText; i++) {
+          await expect(locators.text(page).nth(i)).toHaveCSS('margin-right', '0px');
+          await expect(locators.text(page).nth(i)).toHaveCSS('margin-left', '0px');
+        }
 
-        await expect(locators.addons(page).nth(1)).not.toHaveCSS('margin-right', '8px');
-        await expect(locators.addons(page).nth(3)).not.toHaveCSS('margin-right', '8px');
-        await expect(locators.addons(page).nth(5)).not.toHaveCSS('margin-right', '8px');
-        await expect(locators.addons(page).nth(6)).not.toHaveCSS('margin-right', '8px');
+        const countAddons = await locators.addons(page).count();
+        for (let i = 0; i < countAddons; i++) {
+          await expect(locators.addons(page).nth(i)).toHaveCSS('margin-right', '0px');
+          await expect(locators.addons(page).nth(i)).toHaveCSS('margin-left', '0px');
+        }
       });
 
       await test.step('Verify tab line sizes styles', async () => {
@@ -126,9 +126,9 @@ test.describe(`${TAG.VISUAL} `, () => {
 
   const variablesEllipsis = [
     { w: 100, size: 'l', behavior: 'auto', hintPlacement: 'right', desc: 'default' },
-    { w: 100, size: 'm', behavior: 'auto', ellipsis: { 'ellipsis:cropPosition': 'middle' }, hintPlacement: 'right', desc: 'cropPosition:middle' },
+    { w: 70, size: 'm', behavior: 'auto', ellipsis: { 'ellipsis:cropPosition': 'middle' }, hintPlacement: 'right', desc: 'cropPosition:middle' },
     { w: 100, size: 'l', behavior: 'manual', hintPlacement: 'right', desc: 'default' },
-    { w: 100, size: 'm', behavior: 'manual', ellipsis: { 'ellipsis:cropPosition': 'middle' }, hintPlacement: 'right', desc: 'cropPosition:middle' },
+    { w: 70, size: 'm', behavior: 'manual', ellipsis: { 'ellipsis:cropPosition': 'middle' }, hintPlacement: 'right', desc: 'cropPosition:middle' },
   ];
   variablesEllipsis.forEach((item) => {
     test(`Verify ellipsis in Tab lines behavior = ${item.behavior} size = ${item.size} ellipsis = ${item.desc} styles`, {

diff --git a/...ual-Verify-active-Tab-lines-size-l-underlined-false-styles-1-chromium-linux.png b/...ual-Verify-active-Tab-lines-size-l-underlined-false-styles-1-chromium-linux.png
diff --git a/...sual-Verify-active-Tab-lines-size-l-underlined-false-styles-1-firefox-linux.png b/...sual-Verify-active-Tab-lines-size-l-underlined-false-styles-1-firefox-linux.png
diff --git a/...isual-Verify-active-Tab-lines-size-l-underlined-false-styles-1-webkit-linux.png b/...isual-Verify-active-Tab-lines-size-l-underlined-false-styles-1-webkit-linux.png
diff --git a/...sual-Verify-active-Tab-lines-size-m-underlined-true-styles-1-chromium-linux.png b/...sual-Verify-active-Tab-lines-size-m-underlined-true-styles-1-chromium-linux.png
diff --git a/...isual-Verify-active-Tab-lines-size-m-underlined-true-styles-1-firefox-linux.png b/...isual-Verify-active-Tab-lines-size-m-underlined-true-styles-1-firefox-linux.png
diff --git a/...visual-Verify-active-Tab-lines-size-m-underlined-true-styles-1-webkit-linux.png b/...visual-Verify-active-Tab-lines-size-m-underlined-true-styles-1-webkit-linux.png
diff --git a/...l-Verify-disabled-Tab-lines-size-l-underlined-false-styles-1-chromium-linux.png b/...l-Verify-disabled-Tab-lines-size-l-underlined-false-styles-1-chromium-linux.png
diff --git a/...al-Verify-disabled-Tab-lines-size-l-underlined-false-styles-1-firefox-linux.png b/...al-Verify-disabled-Tab-lines-size-l-underlined-false-styles-1-firefox-linux.png
diff --git a/...ual-Verify-disabled-Tab-lines-size-l-underlined-false-styles-1-webkit-linux.png b/...ual-Verify-disabled-Tab-lines-size-l-underlined-false-styles-1-webkit-linux.png
diff --git a/...al-Verify-disabled-Tab-lines-size-m-underlined-true-styles-1-chromium-linux.png b/...al-Verify-disabled-Tab-lines-size-m-underlined-true-styles-1-chromium-linux.png
diff --git a/...ual-Verify-disabled-Tab-lines-size-m-underlined-true-styles-1-firefox-linux.png b/...ual-Verify-disabled-Tab-lines-size-m-underlined-true-styles-1-firefox-linux.png
diff --git a/...sual-Verify-disabled-Tab-lines-size-m-underlined-true-styles-1-webkit-linux.png b/...sual-Verify-disabled-Tab-lines-size-m-underlined-true-styles-1-webkit-linux.png
diff --git a/...tsx-snapshots/-visual-Verify-disabled-tabLine-with-tooltip-1-chromium-linux.png b/...tsx-snapshots/-visual-Verify-disabled-tabLine-with-tooltip-1-chromium-linux.png
diff --git a/....tsx-snapshots/-visual-Verify-disabled-tabLine-with-tooltip-1-firefox-linux.png b/....tsx-snapshots/-visual-Verify-disabled-tabLine-with-tooltip-1-firefox-linux.png
diff --git a/...t.tsx-snapshots/-visual-Verify-disabled-tabLine-with-tooltip-1-webkit-linux.png b/...t.tsx-snapshots/-visual-Verify-disabled-tabLine-with-tooltip-1-webkit-linux.png
diff --git a/...s-behavior-1df77-ize-m-ellipsis-cropPosition-middle-styles-1-chromium-linux.png b/...s-behavior-1df77-ize-m-ellipsis-cropPosition-middle-styles-1-chromium-linux.png
diff --git a/...es-behavior-1df77-ize-m-ellipsis-cropPosition-middle-styles-1-firefox-linux.png b/...es-behavior-1df77-ize-m-ellipsis-cropPosition-middle-styles-1-firefox-linux.png
diff --git a/...nes-behavior-1df77-ize-m-ellipsis-cropPosition-middle-styles-1-webkit-linux.png b/...nes-behavior-1df77-ize-m-ellipsis-cropPosition-middle-styles-1-webkit-linux.png
diff --git a/...s-behavior-25e42-ize-m-ellipsis-cropPosition-middle-styles-1-chromium-linux.png b/...s-behavior-25e42-ize-m-ellipsis-cropPosition-middle-styles-1-chromium-linux.png
diff --git a/...es-behavior-25e42-ize-m-ellipsis-cropPosition-middle-styles-1-firefox-linux.png b/...es-behavior-25e42-ize-m-ellipsis-cropPosition-middle-styles-1-firefox-linux.png
diff --git a/...nes-behavior-25e42-ize-m-ellipsis-cropPosition-middle-styles-1-webkit-linux.png b/...nes-behavior-25e42-ize-m-ellipsis-cropPosition-middle-styles-1-webkit-linux.png
diff --git a/...-in-Tab-lines-behavior-auto-size-l-ellipsis-default-styles-1-chromium-linux.png b/...-in-Tab-lines-behavior-auto-size-l-ellipsis-default-styles-1-chromium-linux.png
diff --git a/...s-in-Tab-lines-behavior-auto-size-l-ellipsis-default-styles-1-firefox-linux.png b/...s-in-Tab-lines-behavior-auto-size-l-ellipsis-default-styles-1-firefox-linux.png
diff --git a/...is-in-Tab-lines-behavior-auto-size-l-ellipsis-default-styles-1-webkit-linux.png b/...is-in-Tab-lines-behavior-auto-size-l-ellipsis-default-styles-1-webkit-linux.png
diff --git a/...n-Tab-lines-behavior-manual-size-l-ellipsis-default-styles-1-chromium-linux.png b/...n-Tab-lines-behavior-manual-size-l-ellipsis-default-styles-1-chromium-linux.png
diff --git a/...in-Tab-lines-behavior-manual-size-l-ellipsis-default-styles-1-firefox-linux.png b/...in-Tab-lines-behavior-manual-size-l-ellipsis-default-styles-1-firefox-linux.png
diff --git a/...-in-Tab-lines-behavior-manual-size-l-ellipsis-default-styles-1-webkit-linux.png b/...-in-Tab-lines-behavior-manual-size-l-ellipsis-default-styles-1-webkit-linux.png
diff --git a/semcore/tab-line/src/style/tab-line.shadow.css b/semcore/tab-line/src/style/tab-line.shadow.css
@@ -3,10 +3,17 @@ STabLine {
   display: flex;
   width: 100%;
   max-width: 100%;
+
+  &[size='m'] {
+    gap: var(--intergalactic-spacing-content-gap-xxlarge, 16px);
+  }
+  &[size='l'] {
+    gap: var(--intergalactic-spacing-content-gap-xxlarge-extended, 20px);
+  }
 }
 
 STabLine[underlined] {
-  border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-control-tab-line-border */
+  border-bottom: 1px solid var(--intergalactic-control-tab-line-border, oklch(0.137 0.026 175.7 / 0.161));
 }
 
 STabLineItem {
@@ -24,15 +31,14 @@ STabLineItem {
   text-decoration: none;
   -webkit-tap-highlight-color: transparent;
   overflow: visible;
-  /*outline: 0;*/
   text-align: center;
   vertical-align: middle;
   font-family: inherit;
   cursor: pointer;
   border: none;
   background: transparent;
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
-  margin-right: var(--intergalactic-spacing-4x, 16px);
+  gap: var(--intergalactic-spacing-content-gap-medium, 6px);
   font-weight: var(--intergalactic-medium, 500);
 
   &::-moz-focus-inner {
@@ -50,8 +56,8 @@ STabLineItem {
     content: '';
     position: absolute;
     left: 0;
-    bottom: -1px;
-    height: 3px;
+    bottom: 0;
+    height: 2px;
     width: 100%;
     background-color: transparent;
   }
@@ -61,28 +67,23 @@ STabLineItem {
   }
 
   &:hover::before {
-    background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-control-tab-line-border-hover */
+    background-color: var(--intergalactic-control-tab-line-border-hover, oklch(0.137 0.026 175.7 / 0.161));
+    transition-duration: calc(var(--intergalactic-duration-extra-fast, 100) * 1ms);
   }
 
   &[selected]::after {
+    bottom: -1px;
+    height: 3px;
     transition-delay: calc(var(--intergalactic-duration-control, 200) * 1ms);
-    background-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: --intergalactic-control-tab-line-border-active */
-  }
-
-  & SText:not(:last-child) {
-    margin-right: var(--intergalactic-spacing-2x, 8px);
-  }
-
-  & SAddon:not(:last-child) {
-    margin-right: var(--intergalactic-spacing-2x, 8px);
+    background-color: var(--intergalactic-control-tab-line-border-active, oklch(0.23 0.01 140));
   }
 }
 
 SCaret {
   position: absolute;
   bottom: -1px;
   height: 3px;
-  background: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: --intergalactic-control-tab-line-border-active */
+  background: var(--intergalactic-control-tab-line-border-active, oklch(0.23 0.01 140));
   transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out;
 }
 

diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx
@@ -49,21 +49,27 @@ test.describe(`${TAG.VISUAL} `, () => {
     await expect(page).toHaveScreenshot();
 
     await test.step('Verify tab panel styles', async () => {
+      const countTabs = await locators.tabPanels(page).count();
+      for (let i = 0; i < countTabs; i++) {
+        // Spacing between an addon and the text comes from the tab gap
+        await expect(locators.tabPanels(page).nth(i)).toHaveCSS('column-gap', '6px');
+        // Space around the tab content comes from its own padding
+        await expect(locators.tabPanels(page).nth(i)).toHaveCSS('padding-left', '12px');
+        await expect(locators.tabPanels(page).nth(i)).toHaveCSS('padding-right', '12px');
+      }
+
+      // Per-child margins were replaced by the gap and padding above and must not come back
       const countText = await locators.text(page).count();
       for (let i = 0; i < countText; i++) {
-        await expect(locators.text(page).nth(i)).toHaveCSS('margin-right', '8px');
-        await expect(locators.text(page).nth(i)).toHaveCSS('margin-left', '8px');
+        await expect(locators.text(page).nth(i)).toHaveCSS('margin-right', '0px');
+        await expect(locators.text(page).nth(i)).toHaveCSS('margin-left', '0px');
       }
 
-      await expect(locators.addons(page).nth(0)).toHaveCSS('margin-left', '8px');
-      await expect(locators.addons(page).nth(2)).toHaveCSS('margin-left', '8px');
-      await expect(locators.addons(page).nth(4)).toHaveCSS('margin-left', '8px');
-      await expect(locators.addons(page).nth(7)).toHaveCSS('margin-left', '8px');
-
-      await expect(locators.addons(page).nth(1)).toHaveCSS('margin-right', '8px');
-      await expect(locators.addons(page).nth(3)).toHaveCSS('margin-right', '8px');
-      await expect(locators.addons(page).nth(5)).toHaveCSS('margin-right', '8px');
-      await expect(locators.addons(page).nth(6)).toHaveCSS('margin-right', '8px');
+      const countAddons = await locators.addons(page).count();
+      for (let i = 0; i < countAddons; i++) {
+        await expect(locators.addons(page).nth(i)).toHaveCSS('margin-right', '0px');
+        await expect(locators.addons(page).nth(i)).toHaveCSS('margin-left', '0px');
+      }
     });
   });
 

diff --git a/...-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-1-chromium-linux.png b/...-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-1-chromium-linux.png
diff --git a/...r-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-1-firefox-linux.png b/...r-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-1-firefox-linux.png
diff --git a/...er-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-1-webkit-linux.png b/...er-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-1-webkit-linux.png
diff --git a/...-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-2-chromium-linux.png b/...-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-2-chromium-linux.png
diff --git a/...r-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-2-firefox-linux.png b/...r-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-2-firefox-linux.png
diff --git a/...er-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-2-webkit-linux.png b/...er-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-2-webkit-linux.png
diff --git a/...est.tsx-snapshots/-visual-Verify-disabled-Tab-panel-styles-1-chromium-linux.png b/...est.tsx-snapshots/-visual-Verify-disabled-Tab-panel-styles-1-chromium-linux.png
diff --git a/...test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-styles-1-firefox-linux.png b/...test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-styles-1-firefox-linux.png
diff --git a/...-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-styles-1-webkit-linux.png b/...-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-styles-1-webkit-linux.png
diff --git a/...x-snapshots/-visual-Verify-disabled-Tab-panel-with-tooltip-1-chromium-linux.png b/...x-snapshots/-visual-Verify-disabled-Tab-panel-with-tooltip-1-chromium-linux.png
diff --git a/...sx-snapshots/-visual-Verify-disabled-Tab-panel-with-tooltip-1-firefox-linux.png b/...sx-snapshots/-visual-Verify-disabled-Tab-panel-with-tooltip-1-firefox-linux.png
diff --git a/...tsx-snapshots/-visual-Verify-disabled-Tab-panel-with-tooltip-1-webkit-linux.png b/...tsx-snapshots/-visual-Verify-disabled-Tab-panel-with-tooltip-1-webkit-linux.png
diff --git a/...ab-Panel-ellipsis-cropPosition-middle-behavior-auto-styles-1-chromium-linux.png b/...ab-Panel-ellipsis-cropPosition-middle-behavior-auto-styles-1-chromium-linux.png
diff --git a/...Tab-Panel-ellipsis-cropPosition-middle-behavior-auto-styles-1-firefox-linux.png b/...Tab-Panel-ellipsis-cropPosition-middle-behavior-auto-styles-1-firefox-linux.png
diff --git a/...-Tab-Panel-ellipsis-cropPosition-middle-behavior-auto-styles-1-webkit-linux.png b/...-Tab-Panel-ellipsis-cropPosition-middle-behavior-auto-styles-1-webkit-linux.png
diff --git a/...-Panel-ellipsis-cropPosition-middle-behavior-manual-styles-1-chromium-linux.png b/...-Panel-ellipsis-cropPosition-middle-behavior-manual-styles-1-chromium-linux.png
diff --git a/...b-Panel-ellipsis-cropPosition-middle-behavior-manual-styles-1-firefox-linux.png b/...b-Panel-ellipsis-cropPosition-middle-behavior-manual-styles-1-firefox-linux.png
diff --git a/...ab-Panel-ellipsis-cropPosition-middle-behavior-manual-styles-1-webkit-linux.png b/...ab-Panel-ellipsis-cropPosition-middle-behavior-manual-styles-1-webkit-linux.png
diff --git a/...llipsis-in-Tab-Panel-ellipsis-default-behavior-auto-styles-1-chromium-linux.png b/...llipsis-in-Tab-Panel-ellipsis-default-behavior-auto-styles-1-chromium-linux.png
diff --git a/...ellipsis-in-Tab-Panel-ellipsis-default-behavior-auto-styles-1-firefox-linux.png b/...ellipsis-in-Tab-Panel-ellipsis-default-behavior-auto-styles-1-firefox-linux.png
diff --git a/...-ellipsis-in-Tab-Panel-ellipsis-default-behavior-auto-styles-1-webkit-linux.png b/...-ellipsis-in-Tab-Panel-ellipsis-default-behavior-auto-styles-1-webkit-linux.png
diff --git a/...ipsis-in-Tab-Panel-ellipsis-default-behavior-manual-styles-1-chromium-linux.png b/...ipsis-in-Tab-Panel-ellipsis-default-behavior-manual-styles-1-chromium-linux.png
diff --git a/...lipsis-in-Tab-Panel-ellipsis-default-behavior-manual-styles-1-firefox-linux.png b/...lipsis-in-Tab-Panel-ellipsis-default-behavior-manual-styles-1-firefox-linux.png
diff --git a/...llipsis-in-Tab-Panel-ellipsis-default-behavior-manual-styles-1-webkit-linux.png b/...llipsis-in-Tab-Panel-ellipsis-default-behavior-manual-styles-1-webkit-linux.png
diff --git a/semcore/tab-panel/src/style/tab-panel.shadow.css b/semcore/tab-panel/src/style/tab-panel.shadow.css
@@ -17,8 +17,9 @@ STabPanelItem {
   position: relative;
   bottom: -1px;
   display: inline-flex;
+  gap: var(--intergalactic-spacing-content-gap-medium, 6px);
   min-width: 0;
-  height: 32px;
+  height: var(--intergalactic-form-control-m, 32px);
   color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
   border: 1px solid transparent;
   border-bottom: none;
@@ -29,7 +30,7 @@ STabPanelItem {
   touch-action: manipulation;
   user-select: none;
   box-sizing: border-box;
-  padding: 0;
+  padding: 0 var(--intergalactic-spacing-content-padding-medium, 12px);
   padding-bottom: 1px;
   margin: 0;
   box-shadow: none;
@@ -76,38 +77,18 @@ STabPanelItem[disabled] {
 }
 
 STabPanelItem[selected] {
-  color: var(--intergalactic-text-link, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-text-link-primary */
+  color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   flex-shrink: 0;
-
-  &:hover {
-    color: var(--intergalactic-text-link-hover-active, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-text-link-primary-hover-active */
-  }
+  background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
 
   &::after {
     border-bottom: none;
   }
 }
 
-SText {
-  margin: auto var(--intergalactic-spacing-2x, 8px);
-}
-
 SAddon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-
-SAddon:not(:only-child):first-child {
-  margin-left: var(--intergalactic-spacing-2x, 8px);
-}
-
-SAddon:not(:only-child):last-child {
-  margin-right: var(--intergalactic-spacing-2x, 8px);
-}
-
-SAddon:only-child {
-  margin-right: var(--intergalactic-spacing-2x, 8px);
-  margin-left: var(--intergalactic-spacing-2x, 8px);
-}
diff --git a/website/docs/components/tab-line/tab-line.md b/website/docs/components/tab-line/tab-line.md
@@ -29,8 +29,7 @@ Component consists of the following:
 
 ### Sizes
 
-- The `TabLine.Item` has a `margin-right: var(--spacing-4x)` (except for the `last-child`).
-- Addons before and after the text have a margin of 8px.
+TabLine has 2 sizes: M and L.
 
 Table: TabLine sizes and margins
 
@@ -41,17 +40,17 @@ Table: TabLine sizes and margins
 
 ### Types
 
-Depending on the context, you can use TabLine with or without a border-bottom. The border uses the `--border-primary` token for its color.
+Depending on the context, you can use TabLine with or without `border-bottom`.
 
 #### Tabs with border (underlined)
 
-Use TabLine with border-bottom to visually separate navigation from the content it switches. This is particularly helpful for secondary navigation on a page.
+Use TabLine with `border-bottom` to visually separate navigation from the content. This is particularly helpful for secondary navigation on a page.
 
 ![](static/tab-with-border.png)
 
 #### Tabs without border
 
-Use TabLine with border-bottom to visually separate navigation from the content it switches. This is particularly helpful for secondary navigation on a page.
+Use TabLine without `border-bottom` for lower levels of navigation, such as switching data visualizations in widgets.
 
 ![](static/tab-without-border.png)
 
@@ -80,18 +79,13 @@ Table: Examples of addons for TabLine
 
 Table: TabLine states
 
-| State           | Appearance example       | Styles  |
-| --------------- | ------------------------ | ------- |
-| Normal          | ![](static/normal-active.png)            | `color: var(--text-primary)`  |
-| Hover           | ![](static/hover.png)                     | `border-bottom: 2px solid var(--border-primary)` |
-| Active          | ![](static/normal-active.png)            | `border-bottom: 2px solid var(--border-info-active)` |
-| Disabled        | ![](static/disabled.png)               | Use `--disabled-opacity` token.  |
-| Initial loading | ![](static/initial-loading.png) | When indicating that data is being loaded for the first time in the counter inside `TabLine.Item`, use Skeleton with the size of the text's line-height.                 |
-| Loading         | ![](static/loading.png)                 | When showing that data in the counter inside `TabLine.Item` is currently being loaded, use [Spin](/components/spin/spin) with the smallest size (same as in [Button](/components/button/button)).|
-
-### Animation
-
-When switching between active tabs, the border-bottom moves with an `ease` transition and a duration of `500ms`.
+| State                        | Appearance example                                                                                                                                                                                                        |
+| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <nobr>Normal & Active</nobr> | ![](static/normal-active.png)                                                                                                                                                                                             |
+| Hover                        | ![](static/hover.png)                                                                                                                                                                                                     |
+| Disabled                     | ![](static/disabled.png)                                                                                                                                                                                                  |
+| <nobr>Initial loading</nobr> | When indicating that data is being loaded for the first time in the counter inside `TabLine.Item`, use Skeleton with the size of the text's line-height. ![](static/initial-loading.png)                                  |
+| Loading                      | When showing that data in the counter inside `TabLine.Item` is currently being loaded, use [Spin](/components/spin/spin) with the smallest size (same as in [Button](/components/button/button)). ![](static/loading.png) |
 
 ## Placement
 

diff --git a/website/docs/components/tab-panel/tab-panel.md b/website/docs/components/tab-panel/tab-panel.md
@@ -29,8 +29,7 @@ Component consists of the following:
 
 ### Sizes
 
-The TabPanel.Item has a `margin-right: var(--spacing-4x)` (except for the `last-child`).
-Addons before and after the text have a margin of 8px.
+TabPanel has only one size.
 
 ![](static/tab-m.png)
 
@@ -61,14 +60,13 @@ We recommend adding links to tabs so that users can open different tabs of the r
 
 Table: TabPanel states
 
-| State           | Appearance     | Styles     |
-| --------------- | -------------- | ---------- |
-| Normal          | ![](static/normal-active.png)            | `color: var(--text-secondary)`    |
-| Hover           | ![](static/hover.png)                     | `color: var(--text-primary)`    |
-| Active          | ![](static/normal-active.png)            | `color: var(--text-link)`, `border-width: 1px 1px 0px 1px`, `border-style: solid`, `border-color: var(--border-primary)` `border-radius: 6px 6px 0px 0px`                                                        |
-| Disabled        | ![](static/disabled.png)               | Use the `--disabled-opacity` token.     |
-| Initial loading | ![](static/initial-loading.png) | When indicating that data is being loaded for the first time in the counter inside `TabPanel.Item`, use [Skeleton](/components/skeleton/skeleton) with the size of the text's line-height.                 |
-| Loading         | ![](static/loading.png)                 | When showing that data in the counter inside `TabPanel.Item` is currently being loaded, use [Spin](/components/spin/spin) with the smallest size (same as in [Button](/components/button/button)).|
+| State                        | Appearance                                                                                                                                                                                                                 |
+| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <nobr>Normal & Active</nobr> | ![](static/normal-active.png)                                                                                                                                                                                              |
+| Hover                        | ![](static/hover.png)                                                                                                                                                                                                      |
+| Disabled                     | ![](static/disabled.png)                                                                                                                                                                                                   |
+| Initial loading              | When indicating that data is being loaded for the first time in the counter inside `TabPanel.Item`, use [Skeleton](/components/skeleton/skeleton) with the size of the text's line-height. ![](static/initial-loading.png) |
+| Loading                      | When showing that data in the counter inside `TabPanel.Item` is currently being loaded, use [Spin](/components/spin/spin) with the smallest size (same as in [Button](/components/button/button)). ![](static/loading.png) |
 
 ## Usage in UX/UI