fix(checkbox): ensure correct rendering on iOS & macOS 26

[Kiarokh]

Safari (macOS & iOS, tested on Safari 26) & probably even earlier versions have a rendering bug where transitions on descendants whose end state is triggered ONLY via a parent selector using :has() may not animate. Instead, Safari sometimes jumps directly to the final state (or never paints the transition) until a subsequent layout invalidation (e.g. tab switch, resize) happens. Now we are using an equivalent selector that does NOT rely on :has(), using the adjacency between the input and the visual box. This ensures the transitions for the check mark & background color run reliably in Safari while keeping the simpler :has() version commented for future re-implementation or cleanup.

fix #3684

Summary by CodeRabbit

• Bug Fixes
  • Improved reliability of checkbox and radio visuals across browsers, especially Safari.
  • Ensured checkmark animations, opacity, and stroke transitions display consistently when checked/unchecked.
  • Fixed hover, active, and focus-visible states to render correctly and predictably, enhancing usability and accessibility.

Review:

• Commits are atomic
• Commits have the correct type for the changes made
• Commits with breaking changes are marked as such

Browsers tested:

(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)

Windows:

• Chrome
• Edge
• Firefox

Linux:

• Chrome
• Firefox

macOS:

• Chrome
• Firefox
• Safari

Mobile:

• Chrome on Android
• iOS

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

📝 Walkthrough

Walkthrough

Replaced multiple CSS :has() selectors with adjacency-based selectors in checkbox and boolean-input styles to avoid Safari rendering issues. Updated checked, focus-visible, hover, and active state rules, and adjusted the check-mark transition selector. Added detailed comments explaining rationale and potential rollback paths.

Changes

Cohort / File(s)	Summary
Checkbox check-mark transition src/components/checkbox/checkbox.scss	Replaced :has(input[type='checkbox']:checked) with adjacency-based path targeting svg.check-mark; preserved opacity and stroke-dashoffset transitions; added comments on Safari rendering issues; reorganized rule scoping/indentation.
Boolean-input state selectors src/style/internal/boolean-input.scss	Replaced multiple :has(...) selectors with adjacency-based selectors for checked, focus-visible, hover, and active states; retained .checked class fallback; updated pseudo-element hover rules; added extensive comments and rollback notes; minor comment reorganization.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• radio button: remove MDC dependency #3642 — Similar shift from :has() to adjacency-based selectors in boolean-input and checkbox styles.
• Refactor checkbox component to remove MDC dependencies and update styles #3634 — Adjusts checkbox check-mark animation/checked-state selectors overlapping with current changes.

Suggested labels

visual design, maintenance

Suggested reviewers

• LucyChyzhova
• john-traas

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title specifically describes the main change—fixing checkbox rendering on iOS and macOS Safari 26—which aligns with the PR’s content and objectives and uses clear, concise wording.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-3698/

[lime-opensource]

🎉 This PR is included in version 38.26.1 🎉

The release is available on:

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

Your semantic-release bot 📦🚀