fix: elevate focused button group elements to prevent outline clipping

[KRUSHAL2956]

Pull Request Description

Closes #1297. Resolves z-index clipping of focused button outlines in a button group.

When multiple buttons are grouped using the .ease-btn-group utility, they are aligned side-by-side with border overlap/touching. Without explicit z-index control, the border outline/focus ring of the active/focused button gets occluded/clipped by the adjacent buttons in the DOM layout stacking order.

This PR adds a z-index: 1 elevation specifically when a button in the group is focused via keyboard (:focus-visible), ensuring the focus indicator ring is fully visible and not clipped.

---

Type of Change

• ✨ New animation / hover effect
• 🧩 New component
• 📝 Documentation improvement
• 🐛 Bug fix in an existing submission (core button group component focus outline occlusion)
• Other (Accessibility improvement for core button-group keyboard focus visibility)

---

Submission Checklist

⚠️ PRs that fail this checklist will be closed without review.
Note: This checklist is geared towards new community example submissions. Since this is a core framework bug fix resolving an open issue (#1297) in the base components directory, changes to components/ are required.

• All changes are inside submissions/examples/your-feature-name/
• Includes demo.html — self-contained, opens in browser with no server
• Includes style.css — raw CSS for the proposed feature
• Includes README.md — what it does, how to use it, why it fits EaseMotion CSS
• No changes to core/
• No changes to components/ (N/A - Core bug fix in components/buttons.css)
• One feature per PR (no bundled unrelated changes)

---

Feature Description

What does this add?

Elevates focused button group elements to prevent outline clipping and ensure high accessibility.

How does a developer use it?

<div class="ease-btn-group">
  <button class="ease-btn ease-btn-primary">First</button>
  <button class="ease-btn ease-btn-primary">Second</button>
  <button class="ease-btn ease-btn-primary">Third</button>
</div>

Why does it fit EaseMotion CSS?

It improves the accessibility and user experience of interactive elements by ensuring keyboard focus indicators are clearly visible and unclipped.

---

Demo

• Demo checked (Verified using existing button group demos in components directory)

---

Browser Testing

• Chrome
• Firefox
• Edge
• Safari (optional but appreciated)

---

Notes for Maintainer

Tested locally with all linters (npm run lint, npm run lint:duplicates) and tests passing successfully. Rebuilt minified asset easemotion.min.css has been verified to be conflict-free and successfully includes the z-index fix.

---

Reminder: Only the repository maintainer may merge pull requests.
Do not self-merge, even if you have write access.
Maximum 2 active assigned issues per contributor — unassign extras before opening a PR.

[github-actions]

📊 CSS Bundle Size Benchmark

This PR changes the size of easemotion.min.css.

Metric	Base Branch	This PR	Difference
Raw	47.50 KB	47.55 KB	📈 +0.05 KB
Gzip	8.33 KB	8.34 KB	📈 +0.01 KB
Brotli	7.14 KB	7.14 KB	📉 -0.00 KB