feat: add ease-switch - animated toggle switch component

[Pcmhacker-piro]

Closes #1263

New component: iOS-style toggle switch with 3 sizes, danger variant, wrapper with label on left/right, disabled state, accessible hidden checkbox with role=switch, dark mode, and reduced motion support.

Closes #1263

Pull Request Description

---

Type of Change

• ✨ New animation / hover effect
• 🧩 New component
• 📝 Documentation improvement
• 🐛 Bug fix in an existing submission
• Other (describe below)

---

Submission Checklist

⚠️ PRs that fail this checklist will be closed without review.

• 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/
• One feature per PR (no bundled unrelated changes)

---

Feature Description

What does this add?

How does a developer use it?

<!-- Show the class usage in HTML -->

Why does it fit EaseMotion CSS?

---

Demo

• Demo added (demo.html works by opening directly in a browser)

---

Browser Testing

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

---

Notes for Maintainer

---

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.

Pull Request Description

Add a new ease-switch component: an animated toggle switch (iOS-style pill) with 3 sizes, danger variant, wrapper with label on left/right, disabled state, focus ring, dark mode, and reduced motion support.

---

Type of Change

• ✨ New animation / hover effect
• 🧩 New component
• 📝 Documentation improvement
• 🐛 Bug fix in an existing submission
• Other (describe below)

---

Submission Checklist

• All changes are inside submissions/examples/ease-switch/
• 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/
• One feature per PR (no bundled unrelated changes)

---

Feature Description

What does this add?

A toggle switch with:

• 3 sizes: sm (32x20, 16px thumb), default (40x24, 20px), lg (52x32, 28px)
• Danger variant: red track when on for destructive toggles
• Label wrapper: .ease-switch-wrapper with left/right positioning via .ease-switch-wrapper--right
• States: checked, disabled (0.5 opacity), focused (visible focus ring via :focus-visible)
• Accessibility: hidden native checkbox with role="switch", aria-checked, keyboard operable
• Dark mode: automatic via prefers-color-scheme
• Reduced motion: respects prefers-reduced-motion

How does a developer use it?

<label class="ease-switch-wrapper">
  <span class="ease-switch__label">Enable notifications</span>
  <span class="ease-switch">
    <input type="checkbox" role="switch">
    <span class="ease-switch__track">
      <span class="ease-switch__thumb"></span>
    </span>
  </span>
</label>
input.addEventListener('change', function() {
  sw.classList.toggle('ease-switch--checked', input.checked);
});
Why does it fit EaseMotion CSS?
Toggle switches are a fundamental UI pattern for settings panels, privacy controls, and feature flags — missing from EaseMotion.
Demo
- Demo added (demo.html works by opening directly in a browser)
Browser Testing
- Chrome
- Firefox
- Edge
- Safari (optional but appreciated)
Notes for Maintainer
CSS-only visual rendering via custom properties for sizing. Minimal JS to sync .ease-switch--checked class with checkbox state. Ready for integration into components/.
Closes #1263

[github-actions]

✅ Submission Validation Passed!

Great job! All required files are present.

📁 Folder: submissions/examples/ease-switch

Files found:

• ✅ demo.html
• ✅ style.css
• ✅ README.md

🚀 Next Steps:

• The maintainer will review your PR
• Respond to any feedback if requested
• Once approved, your contribution will be merged!

Thank you for contributing to EaseMotion CSS! 🎉

[Pcmhacker-piro]

heey @SAPTARSHI-coder
pls check it