Add CSS custom properties for checkbox and switch label overflow

[Kiarokh]

fix #3998
fix #3743

Summary by CodeRabbit

• Style
  • Enhanced checkbox and switch components with customizable label text wrapping options to improve layout handling for long or unbreakable label text. This provides better control over how labels display when space is constrained.

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]

📝 Walkthrough

Walkthrough

This PR adds CSS custom properties to allow consumers to control overflow behavior for checkbox and switch labels, enabling long single-word labels to break and wrap rather than overflow their containers.

Changes

Cohort / File(s)	Summary
Boolean Component Label Styling src/components/checkbox/checkbox.scss, src/components/switch/switch.scss, src/style/internal/boolean-input.scss	Added overflow-wrap CSS custom properties (--checkbox-label-overflow-wrap, --switch-label-overflow-wrap, --limel-boolean-input-label-overflow-wrap) with default value normal to control label text wrapping behavior.
Example Controls Styling src/examples/example-controls.scss	Applied new CSS custom properties with break-word value to override default behavior for example component instances.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• PR #3642 — Introduced boolean-input styling and design-token variables that this PR extends by adding overflow-wrap control.
• PR #3634 — Modified checkbox stylesheet structure; related at the component stylesheet level.

Suggested labels

visual design, docs

Suggested reviewers

• LucyChyzhova
• john-traas

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	PR implements all key objectives from issue #3998: exposes CSS custom properties for label overflow wrapping on checkbox and switch components, prefers overflow-wrap mechanism, documents properties, and applies break-word in example-controls.
Out of Scope Changes check	✅ Passed	All changes are directly related to issue #3998 objectives: CSS custom properties for overflow-wrap control, documentation, and example updates with no unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely summarizes the main change: adding CSS custom properties for controlling label overflow in checkbox and switch components.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch boolean-input-overflow-wrap

---

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-4002/