[Feature Request]: <Issue: Improve Disabled Switch Component Cursor Style>

[mryunt02]

Describe the problem or use case

Currently, the Switch component's cursor style remains cursor: pointer even when the component is disabled. This behavior can be misleading for users, as the pointer cursor typically indicates an interactive element. For a better user experience, the cursor should change to not-allowed when the Switch component is disabled, indicating that the element is not interactive.

For example: "When using the Baklava in scenario X, I encountered issues with the Switch component. Even when the Switch is disabled, the cursor remains a pointer, which can confuse users as it implies the component is still interactive."

Proposed solution

To address this issue, the cursor style for the Switch component should be updated to cursor: not-allowed when it is disabled. This change can be implemented by modifying the CSS as follows:
:host([disabled]) .switch { opacity: 0.5; cursor: not-allowed; }
This proposed solution will provide a visual cue to users that the Switch component is not interactive when disabled, improving overall user experience and accessibility.

Alternatives considered

No response

Additional technical context

No response

[github-actions]

🎉 This issue has been resolved in version 3.3.0-beta.2 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀