fix: button-group replaced gap with background-clip (#DS-5112)

[NikGurev]

No description provided.

[github-actions]

🚨 E2E tests failed

Review the report for details.

---

💡 Comment /approve-snapshots to approve snapshot changes.

[github-actions]

🚨 E2E tests failed

Review the report for details.

---

💡 Comment /approve-snapshots to approve snapshot changes.

[github-actions]

Visit the preview URL for this PR (updated for commit 07bf579):

https://koobiq-next--prs-1691-pc5qeex6.web.app

_{(expires Wed, 08 Jul 2026 14:35:30 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c}

[github-actions]

🚨 E2E tests failed

Review the report for details.

---

💡 Comment /approve-snapshots to approve snapshot changes.

[NikGurev]

/approve-snapshots

[github-actions]

🔄 Updating snapshots.

[github-actions]

✅ Snapshots updated!

[Copilot]

Pull request overview

This PR updates the kbq-button-group styling to remove the reliance on gap and instead achieve the intended visual separation/joins via border/background painting behavior, with the e2e example updated accordingly.

Changes:

• Removed layout-gap-3xs usage from the button-group e2e example markup.
• Updated button-group SCSS to use background-clip and border/pseudo-element techniques for button junction rendering (including a divider for filled contrast-fade groups).

Reviewed changes

Copilot reviewed 2 out of 4 changed files in this pull request and generated 3 comments.

File	Description
packages/components/button/e2e.ts	Removes external layout gap class from a button-group example to reflect the new styling approach.
packages/components/button/button-group.scss	Replaces the previous gap approach with border/background-clip and divider pseudo-elements for filled button-group junctions.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.