sp-tabs should be left-aligned in horizontal layout

[adixon-adobe]

Expected Behaviour

The tabs should look like the design without any padding on the left.

Actual Behaviour

There's a little left padding which you can see in the border bottom.

Related CSS issue: adobe/spectrum-css#1107

[Westbrook]

Interest. Does the source reference the usage of the focus ring when fully left aligned like that?

Do you thoughts on SWC doing anything ahead of CSS addressing this?

[adixon-adobe]

I'd at least expect the focus ring to go beyond the bottom border, but it seems like we should get some design guidance here. Do you know if focus rings are affected by overflow:hidden;? If not, I could see just adding some notes to the docs to make sure you leave space for them.

[adixon-adobe]

Following up:

My expectation (assuming the focus ring requires that space) is that the bottom border would stop where the text is (not where the focus ring extends). It'd also be nice to have access to a custom property for the left padding since we have a few places where we need to shift this so it's left-aligned with other controls that don't have similar wide focus rings.

[Westbrook]

Preview: Preview: https://westbrook-dna-7--spectrum-web-components.netlify.app/storybook/index.html?path=/story/tabs-sizes--s

Would we expect a custom property that allowed consumers to "update" this delivery to align with what was previously the default?