diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-l-showBadge-true-1-chromium-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-l-showBadge-true-1-chromium-linux.png index eef79447e1..efc4cd2d1d 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-l-showBadge-true-1-chromium-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-l-showBadge-true-1-chromium-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-l-showBadge-true-1-firefox-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-l-showBadge-true-1-firefox-linux.png index 00bbf1bdcf..341031e8c8 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-l-showBadge-true-1-firefox-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-l-showBadge-true-1-firefox-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-l-showBadge-true-1-webkit-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-l-showBadge-true-1-webkit-linux.png index 2e80366d98..458d3974f4 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-l-showBadge-true-1-webkit-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-l-showBadge-true-1-webkit-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-m-showBadge-undefined-1-chromium-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-m-showBadge-undefined-1-chromium-linux.png index 945070860a..8ea27427f2 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-m-showBadge-undefined-1-chromium-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-m-showBadge-undefined-1-chromium-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-m-showBadge-undefined-1-firefox-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-m-showBadge-undefined-1-firefox-linux.png index 0f40e62006..508e17008a 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-m-showBadge-undefined-1-firefox-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-m-showBadge-undefined-1-firefox-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-m-showBadge-undefined-1-webkit-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-m-showBadge-undefined-1-webkit-linux.png index bf70e17f63..97727895c9 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-m-showBadge-undefined-1-webkit-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-false-size-m-showBadge-undefined-1-webkit-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-l-showBadge-true-1-chromium-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-l-showBadge-true-1-chromium-linux.png index 4f9c61c7bd..ed3dfcda3e 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-l-showBadge-true-1-chromium-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-l-showBadge-true-1-chromium-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-l-showBadge-true-1-firefox-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-l-showBadge-true-1-firefox-linux.png index a4dee659ce..b3c0a8964d 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-l-showBadge-true-1-firefox-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-l-showBadge-true-1-firefox-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-l-showBadge-true-1-webkit-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-l-showBadge-true-1-webkit-linux.png index aec866e86a..10fd75b557 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-l-showBadge-true-1-webkit-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-l-showBadge-true-1-webkit-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-m-showBadge-undefined-1-chromium-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-m-showBadge-undefined-1-chromium-linux.png index e1ea3fdc1f..3eb2f84a83 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-m-showBadge-undefined-1-chromium-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-m-showBadge-undefined-1-chromium-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-m-showBadge-undefined-1-firefox-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-m-showBadge-undefined-1-firefox-linux.png index 169aa2473b..3cf1277969 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-m-showBadge-undefined-1-firefox-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-m-showBadge-undefined-1-firefox-linux.png differ diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-m-showBadge-undefined-1-webkit-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-m-showBadge-undefined-1-webkit-linux.png index 03f5260df8..03e8e7bcb8 100644 Binary files a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-m-showBadge-undefined-1-webkit-linux.png and b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-TablineFH-Verify-Tabline-disabled-true-size-m-showBadge-undefined-1-webkit-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx b/semcore/tab-line/__tests__/tab-line.browser-test.tsx index dcb5f95d5a..18d021e929 100644 --- 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/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-l-underlined-false-styles-1-chromium-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-l-underlined-false-styles-1-chromium-linux.png index 7b7b994387..cc3dfcb384 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-l-underlined-false-styles-1-chromium-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-l-underlined-false-styles-1-chromium-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-l-underlined-false-styles-1-firefox-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-l-underlined-false-styles-1-firefox-linux.png index d0c43d2ed3..eee21775a8 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-l-underlined-false-styles-1-firefox-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-l-underlined-false-styles-1-firefox-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-l-underlined-false-styles-1-webkit-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-l-underlined-false-styles-1-webkit-linux.png index cd92cf8112..3904b61403 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-l-underlined-false-styles-1-webkit-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-l-underlined-false-styles-1-webkit-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-m-underlined-true-styles-1-chromium-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-m-underlined-true-styles-1-chromium-linux.png index 3fa5d91b5d..ef6aa90b36 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-m-underlined-true-styles-1-chromium-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-m-underlined-true-styles-1-chromium-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-m-underlined-true-styles-1-firefox-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-m-underlined-true-styles-1-firefox-linux.png index 79f2bf0073..450af0b3d8 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-m-underlined-true-styles-1-firefox-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-m-underlined-true-styles-1-firefox-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-m-underlined-true-styles-1-webkit-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-m-underlined-true-styles-1-webkit-linux.png index bca381301c..876dd64e6f 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-m-underlined-true-styles-1-webkit-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-active-Tab-lines-size-m-underlined-true-styles-1-webkit-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-l-underlined-false-styles-1-chromium-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-l-underlined-false-styles-1-chromium-linux.png index 870992ffca..28974e7d42 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-l-underlined-false-styles-1-chromium-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-l-underlined-false-styles-1-chromium-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-l-underlined-false-styles-1-firefox-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-l-underlined-false-styles-1-firefox-linux.png index 3672c05d49..97d141302f 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-l-underlined-false-styles-1-firefox-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-l-underlined-false-styles-1-firefox-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-l-underlined-false-styles-1-webkit-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-l-underlined-false-styles-1-webkit-linux.png index 8a82790e4f..b03d350a30 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-l-underlined-false-styles-1-webkit-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-l-underlined-false-styles-1-webkit-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-m-underlined-true-styles-1-chromium-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-m-underlined-true-styles-1-chromium-linux.png index 60dc8e408b..58cc6d5102 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-m-underlined-true-styles-1-chromium-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-m-underlined-true-styles-1-chromium-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-m-underlined-true-styles-1-firefox-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-m-underlined-true-styles-1-firefox-linux.png index ac31143100..4a8c4122e2 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-m-underlined-true-styles-1-firefox-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-m-underlined-true-styles-1-firefox-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-m-underlined-true-styles-1-webkit-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-m-underlined-true-styles-1-webkit-linux.png index 11989ef9c7..1139c47ea5 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-m-underlined-true-styles-1-webkit-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-lines-size-m-underlined-true-styles-1-webkit-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-tabLine-with-tooltip-1-chromium-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-tabLine-with-tooltip-1-chromium-linux.png index d34e7c5304..27f7792be2 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-tabLine-with-tooltip-1-chromium-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-tabLine-with-tooltip-1-chromium-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-tabLine-with-tooltip-1-firefox-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-tabLine-with-tooltip-1-firefox-linux.png index 2d119f95cf..6a3be6bc8e 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-tabLine-with-tooltip-1-firefox-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-tabLine-with-tooltip-1-firefox-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-tabLine-with-tooltip-1-webkit-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-tabLine-with-tooltip-1-webkit-linux.png index 17f72e859f..fa844be1db 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-tabLine-with-tooltip-1-webkit-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-disabled-tabLine-with-tooltip-1-webkit-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-1df77-ize-m-ellipsis-cropPosition-middle-styles-1-chromium-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-1df77-ize-m-ellipsis-cropPosition-middle-styles-1-chromium-linux.png index 8aac0ed320..5a18bf9f0d 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-1df77-ize-m-ellipsis-cropPosition-middle-styles-1-chromium-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-1df77-ize-m-ellipsis-cropPosition-middle-styles-1-chromium-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-1df77-ize-m-ellipsis-cropPosition-middle-styles-1-firefox-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-1df77-ize-m-ellipsis-cropPosition-middle-styles-1-firefox-linux.png index a0e8d5b3ea..1dcebf136b 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-1df77-ize-m-ellipsis-cropPosition-middle-styles-1-firefox-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-1df77-ize-m-ellipsis-cropPosition-middle-styles-1-firefox-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-1df77-ize-m-ellipsis-cropPosition-middle-styles-1-webkit-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-1df77-ize-m-ellipsis-cropPosition-middle-styles-1-webkit-linux.png index 595710e3e2..764eb8c7a9 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-1df77-ize-m-ellipsis-cropPosition-middle-styles-1-webkit-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-1df77-ize-m-ellipsis-cropPosition-middle-styles-1-webkit-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-25e42-ize-m-ellipsis-cropPosition-middle-styles-1-chromium-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-25e42-ize-m-ellipsis-cropPosition-middle-styles-1-chromium-linux.png index a605320704..4dc719a3cd 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-25e42-ize-m-ellipsis-cropPosition-middle-styles-1-chromium-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-25e42-ize-m-ellipsis-cropPosition-middle-styles-1-chromium-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-25e42-ize-m-ellipsis-cropPosition-middle-styles-1-firefox-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-25e42-ize-m-ellipsis-cropPosition-middle-styles-1-firefox-linux.png index 0c931f4e73..2388fa94f3 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-25e42-ize-m-ellipsis-cropPosition-middle-styles-1-firefox-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-25e42-ize-m-ellipsis-cropPosition-middle-styles-1-firefox-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-25e42-ize-m-ellipsis-cropPosition-middle-styles-1-webkit-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-25e42-ize-m-ellipsis-cropPosition-middle-styles-1-webkit-linux.png index 6a5caba580..2d6bb0cd67 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-25e42-ize-m-ellipsis-cropPosition-middle-styles-1-webkit-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-25e42-ize-m-ellipsis-cropPosition-middle-styles-1-webkit-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-auto-size-l-ellipsis-default-styles-1-chromium-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-auto-size-l-ellipsis-default-styles-1-chromium-linux.png index ad3afe8362..679fee1dcf 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-auto-size-l-ellipsis-default-styles-1-chromium-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-auto-size-l-ellipsis-default-styles-1-chromium-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-auto-size-l-ellipsis-default-styles-1-firefox-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-auto-size-l-ellipsis-default-styles-1-firefox-linux.png index 510a97045d..ac2941ce0c 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-auto-size-l-ellipsis-default-styles-1-firefox-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-auto-size-l-ellipsis-default-styles-1-firefox-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-auto-size-l-ellipsis-default-styles-1-webkit-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-auto-size-l-ellipsis-default-styles-1-webkit-linux.png index 5df5feaa66..f1da93fcbc 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-auto-size-l-ellipsis-default-styles-1-webkit-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-auto-size-l-ellipsis-default-styles-1-webkit-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-manual-size-l-ellipsis-default-styles-1-chromium-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-manual-size-l-ellipsis-default-styles-1-chromium-linux.png index 0252d10d79..7eae3b94bb 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-manual-size-l-ellipsis-default-styles-1-chromium-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-manual-size-l-ellipsis-default-styles-1-chromium-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-manual-size-l-ellipsis-default-styles-1-firefox-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-manual-size-l-ellipsis-default-styles-1-firefox-linux.png index 1ea862dea3..fb058c3914 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-manual-size-l-ellipsis-default-styles-1-firefox-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-manual-size-l-ellipsis-default-styles-1-firefox-linux.png differ diff --git a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-manual-size-l-ellipsis-default-styles-1-webkit-linux.png b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-manual-size-l-ellipsis-default-styles-1-webkit-linux.png index 3594b48269..0220237d4b 100644 Binary files a/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-manual-size-l-ellipsis-default-styles-1-webkit-linux.png and b/semcore/tab-line/__tests__/tab-line.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-lines-behavior-manual-size-l-ellipsis-default-styles-1-webkit-linux.png differ diff --git a/semcore/tab-line/src/style/tab-line.shadow.css b/semcore/tab-line/src/style/tab-line.shadow.css index b15b04f673..cc6913e642 100644 --- 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,7 +31,6 @@ STabLineItem { text-decoration: none; -webkit-tap-highlight-color: transparent; overflow: visible; - /*outline: 0;*/ text-align: center; vertical-align: middle; font-family: inherit; @@ -32,7 +38,7 @@ STabLineItem { 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,20 +67,15 @@ 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)); } } @@ -82,7 +83,7 @@ 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 index b1320958c6..85f645b9f7 100644 --- 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/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-1-chromium-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-1-chromium-linux.png index e9d580c1ca..466a245db9 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-1-chromium-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-1-chromium-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-1-firefox-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-1-firefox-linux.png index f3dd06da81..53af419bef 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-1-firefox-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-1-firefox-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-1-webkit-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-1-webkit-linux.png index 0188d83141..752000f343 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-1-webkit-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-1-webkit-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-2-chromium-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-2-chromium-linux.png index 8f54bcc639..2e7c3f8755 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-2-chromium-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-2-chromium-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-2-firefox-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-2-firefox-linux.png index f3dd06da81..53af419bef 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-2-firefox-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-2-firefox-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-2-webkit-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-2-webkit-linux.png index 12234a95a8..d6ff1cca1e 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-2-webkit-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-active-Tab-Panel-styles-2-webkit-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-styles-1-chromium-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-styles-1-chromium-linux.png index 1b6da98be4..45f0813bb6 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-styles-1-chromium-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-styles-1-chromium-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-styles-1-firefox-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-styles-1-firefox-linux.png index 75c7f1ab57..ed55a895ae 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-styles-1-firefox-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-styles-1-firefox-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-styles-1-webkit-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-styles-1-webkit-linux.png index 37f1ae5576..417e92ddcf 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-styles-1-webkit-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-styles-1-webkit-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-with-tooltip-1-chromium-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-with-tooltip-1-chromium-linux.png index 02c7211487..0f016df048 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-with-tooltip-1-chromium-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-with-tooltip-1-chromium-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-with-tooltip-1-firefox-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-with-tooltip-1-firefox-linux.png index dc67b61a0c..94457ca17b 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-with-tooltip-1-firefox-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-with-tooltip-1-firefox-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-with-tooltip-1-webkit-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-with-tooltip-1-webkit-linux.png index 16e45a3f97..1cb6632cee 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-with-tooltip-1-webkit-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-disabled-Tab-panel-with-tooltip-1-webkit-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-auto-styles-1-chromium-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-auto-styles-1-chromium-linux.png index 311184e487..32389d685f 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-auto-styles-1-chromium-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-auto-styles-1-chromium-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-auto-styles-1-firefox-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-auto-styles-1-firefox-linux.png index 46b4aa71e7..b55d96d549 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-auto-styles-1-firefox-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-auto-styles-1-firefox-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-auto-styles-1-webkit-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-auto-styles-1-webkit-linux.png index 0fdf9737ac..5e4ec0145e 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-auto-styles-1-webkit-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-auto-styles-1-webkit-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-manual-styles-1-chromium-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-manual-styles-1-chromium-linux.png index 2b4a0dcaca..a50d7b409d 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-manual-styles-1-chromium-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-manual-styles-1-chromium-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-manual-styles-1-firefox-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-manual-styles-1-firefox-linux.png index 72fbb80786..3edf81f0ef 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-manual-styles-1-firefox-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-manual-styles-1-firefox-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-manual-styles-1-webkit-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-manual-styles-1-webkit-linux.png index a21da5d607..5751802252 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-manual-styles-1-webkit-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-cropPosition-middle-behavior-manual-styles-1-webkit-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-auto-styles-1-chromium-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-auto-styles-1-chromium-linux.png index 92102daf13..36fd4bfb74 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-auto-styles-1-chromium-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-auto-styles-1-chromium-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-auto-styles-1-firefox-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-auto-styles-1-firefox-linux.png index fdac271e03..6f030b2dcb 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-auto-styles-1-firefox-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-auto-styles-1-firefox-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-auto-styles-1-webkit-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-auto-styles-1-webkit-linux.png index 05f9c9fdf3..619f7911ac 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-auto-styles-1-webkit-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-auto-styles-1-webkit-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-manual-styles-1-chromium-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-manual-styles-1-chromium-linux.png index 7fb84d1e9e..f18c847b3f 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-manual-styles-1-chromium-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-manual-styles-1-chromium-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-manual-styles-1-firefox-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-manual-styles-1-firefox-linux.png index 7338fadc4f..cda2d72363 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-manual-styles-1-firefox-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-manual-styles-1-firefox-linux.png differ diff --git a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-manual-styles-1-webkit-linux.png b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-manual-styles-1-webkit-linux.png index 0875cf2f4b..35313df5e8 100644 Binary files a/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-manual-styles-1-webkit-linux.png and b/semcore/tab-panel/__tests__/tab-panel.browser-test.tsx-snapshots/-visual-Verify-ellipsis-in-Tab-Panel-ellipsis-default-behavior-manual-styles-1-webkit-linux.png differ diff --git a/semcore/tab-panel/src/style/tab-panel.shadow.css b/semcore/tab-panel/src/style/tab-panel.shadow.css index 8241577de8..1b39922a49 100644 --- 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 index d9eadd2e47..11af5faf06 100644 --- 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 | +| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Normal & Active | ![](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 `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 index 871ac7ebf0..a80605b890 100644 --- 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 | +| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Normal & Active | ![](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 diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 6c80f00014..ea73e585f6 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -241,6 +241,7 @@ "modal", "side-panel", "slider", + "tab-panel", "textarea" ] }, @@ -472,7 +473,6 @@ "feedback-form", "input", "input-tags", - "tab-line", "textarea" ] }, @@ -494,7 +494,6 @@ "input", "side-panel", "slider", - "tab-line", "tab-panel", "textarea", "time-picker" @@ -2285,19 +2284,25 @@ "name": "--intergalactic-control-tab-line-border", "value": "oklch(0.137 0.026 175.7 / 0.161)", "description": "Border color of the TabLine in its normal state.", - "components": [] + "components": [ + "tab-line" + ] }, { "name": "--intergalactic-control-tab-line-border-active", "value": "oklch(0.23 0.01 140)", "description": "Border color of the TabLine in its active state.", - "components": [] + "components": [ + "tab-line" + ] }, { "name": "--intergalactic-control-tab-line-border-hover", "value": "oklch(0.137 0.026 175.7 / 0.161)", "description": "Border color of the TabLine in its hover state.", - "components": [] + "components": [ + "tab-line" + ] }, { "name": "--intergalactic-table-border-accent", @@ -3294,6 +3299,7 @@ "notice", "pills", "tab-line", + "tab-panel", "textarea", "time-picker" ] @@ -3377,6 +3383,7 @@ "input-tags", "modal", "pills", + "tab-panel", "textarea", "time-picker", "tooltip", @@ -3456,7 +3463,9 @@ "input", "pills", "radio", - "select" + "select", + "tab-line", + "tab-panel" ] }, { @@ -3489,7 +3498,8 @@ "value": "16px", "description": "2x large gap between elements, rows, or columns.", "components": [ - "pagination" + "pagination", + "tab-line" ] }, { @@ -3498,6 +3508,7 @@ "description": "Extended 2x large gap between elements, rows, or columns.", "components": [ "pagination", + "tab-line", "wizard" ] },