feat: ✨ add centered property to sd-tab-group

[MartaPintoTeixeira]

Description:

Adds a centered property to sd-tab-group (Figma sd-tab-group V.2.2.3). Tabs are centered within the tab group and the separation line extends on both sides. Works for the default and container variants.

• New centered boolean property (reflected); the active indicator repositions correctly when centered.
• New Centered story on the sd-tab-group docs page.
• "Tab Group Center Aligned" template now uses centered instead of the ::part(tabs) CSS workaround.

sd-tab V.2.2.2 (removed unused gap on the active indicator) has no visual change, so nothing changes in code.

Definition of Reviewable:

• Documentation is created/updated
• E2E tests (features, a11y, bug fixes) are created/updated
• Stories (features, a11y) are created/updated
• relevant tickets are linked

Closes #2907

🤖 Generated with Claude Code

[changeset-bot]

🦋 Changeset detected

Latest commit: 4b7a39a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@solid-design-system/components	Minor
@solid-design-system/docs	Minor
@solid-design-system/mcp	Minor
@solid-design-system/styles	Minor
@solid-design-system/tokens	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🚀 Storybook has been deployed for branch feat_tab-group-centered

• View Storybook

[coraliefeil]

Thanks for picking this up! I compared it with the updated Figma branch (#2340) and tested it in the branch Storybook. centered works for default and container, the separation line extends on both sides, the indicator repositions correctly, and overflowing tabs still scroll without being clipped. The name centered also fits our boolean naming (inverted, stacked, rounded…), so no change needed there.

Please update to match the Figma review:

• Version: the PR description says Figma sd-tab-group V.2.2.3, but a new property is a minor bump, so it's now V.2.3.0.
• Template name: rename "Tab Group Center Aligned for Mobile" to "Tab Group Mobile with Icons", as in Figma and the changelog.
• Spelling: "Favourites" should be "Favorites" in the mobile template (tab and headline). We use US spelling.
• Linked issue: Closes feat[design]: ✨ sd-tab-group centered property #2907 closes the design ticket. Please link the dev ticket or Epic feat: ✨ sd-tab-group to have a centered property #2340 instead.

Tests and CI:

• Screenshot test: "Sample: Centered" in tab-group.test.stories.ts still uses the ::part(tabs) { justify-content: center } workaround. Please switch it to so Chromatic covers the new property.
• Unit test: please add a test for centered in tab-group.test.ts (attribute reflected, tabs centered).
• MCP metadata: run pnpm build in packages/mcp and commit the regenerated metadata (new Centered story, updated template). Otherwise check:metadata will probably fail once the PR leaves draft.

Once this is merged, I'll remove the "Figma-only for now" note from the Centered section in the Figma docs.