Use the icon theme caret instead of the Bootstrap caret helper class

The caret, the small triangle indicating that an element can be expanded or collapsed, is currently produced in two different ways in XWiki Standard:

• with the Bootstrap caret helper class, which draws the triangle out of CSS borders
• with the caret-down / caret-right / caret-up icons of the current icon theme

A forum proposal settled on the second one as the standard. A caret is an icon like any other: it should follow the icon theme of the wiki, and for font based icon themes it inherits the color of its neighboring text instead of needing a dedicated border-color rule.

This issue is about migrating the remaining class="caret" usages of XWiki Standard to the icon theme.

Remaining usages

The Bootstrap test fixtures under xwiki-platform-bootstrap/src/main/node/tests/ and the imported Bootswatch themes are third-party content and should stay untouched. The caret class itself stays available in Bootstrap, this issue only stops XWiki Standard from using it.

Points of attention

• buttonGroup.js is the exact change that was reverted in XWIKI-24482, where the Distribution Wizard side buttons ended up tiny and without an icon. Redoing it requires a check on a Distribution Wizard screen.
• macroSelector.js line 208 looks the caret up with children('.caret') to move it around, so it has to follow whatever resourcePicker.js ends up emitting.
• The two Vue components cannot call the Velocity icon service, they need to go through the icon mechanism already available in the design system webjar.
• menus_macros.vm lines 108 and 112 are the two responsive carets of the menu bar, one of which is only shown on extra small screens. The stylesheets targeting .caret need a pass as well.
• Once the migration is done, the convention is documented on the Icons page of the Front-end Resources guide.

If any of the migration cannot happen, the non standard caret should be commented to explain why it can't be aligned.