From dd3045c848c005b07682148ebe08bc4b495cb76f Mon Sep 17 00:00:00 2001 From: Brian Hanson Date: Wed, 7 Oct 2026 14:18:09 -0500 Subject: [PATCH] Fix tab font weights --- .../src/components/tabs/tabs.browser.test.ts | 12 ++++++++++++ .../craftcms-ui/src/components/tabs/tabs.styles.ts | 6 ++++++ 2 files changed, 18 insertions(+) diff --git a/packages/craftcms-ui/src/components/tabs/tabs.browser.test.ts b/packages/craftcms-ui/src/components/tabs/tabs.browser.test.ts index d9bc4f791bc..5fa1fbb5dcf 100644 --- a/packages/craftcms-ui/src/components/tabs/tabs.browser.test.ts +++ b/packages/craftcms-ui/src/components/tabs/tabs.browser.test.ts @@ -53,6 +53,18 @@ it('grows with its panels under a host that was not', async () => { expect(tabs.getBoundingClientRect().height).toBeGreaterThan(800); }); +it('weights the selected tab the same as its reserved label width', async () => { + const tabs = await fixture('display: block;'); + const tab = tabs.querySelector('craft-tab')!; + const label = tab.shadowRoot!.querySelector('.tab__label')!; + + expect(tab.hasAttribute('selected')).toBe(true); + expect(getComputedStyle(tab).fontWeight).toBe( + getComputedStyle(label, '::after').fontWeight + ); + expect(getComputedStyle(tab).fontWeight).not.toBe('700'); +}); + it('scrolls its panels from the keyboard, leaving the strip in place', async () => { const tabs = await fixture('display: block; block-size: 300px;'); const region = panels(tabs); diff --git a/packages/craftcms-ui/src/components/tabs/tabs.styles.ts b/packages/craftcms-ui/src/components/tabs/tabs.styles.ts index ddd7d893704..c5b16920637 100644 --- a/packages/craftcms-ui/src/components/tabs/tabs.styles.ts +++ b/packages/craftcms-ui/src/components/tabs/tabs.styles.ts @@ -67,6 +67,12 @@ export default css` flex: none; } + /* Overrides LionTabs' bold, which would otherwise beat the tab's own + selected weight and its width-reserving label copy. */ + .tabs__tab-group ::slotted([slot='tab'][selected]) { + font-weight: var(--c-tab-font-weight-active, var(--font-weight-semibold)); + } + /* * Unless the strip is asked to divide its width evenly, which is the other * answer to the same problem: rather than collapsing the tabs that don't