Pull Request

🤨 Rationale

Switch to using box-sizing: border-box; consistently in all our components.

Each component should use the display helper when defined which was made consistent in #2114. This PR leverages that helper to make sure each component sets the elements in the shadow root to use box-sizing: border-box; consistently
Created separate selectors for targeting all children, i.e. * {}, the host itself, i.e. :host {}, and all before and after pseduo-elements so devtools stays clearer, specifically the selector for :host and the selector for * are clear in dev tools without the noise of the ::before and ::after selectors
Cleared the manual configuration for box-sizing
Cleaned up some padding configurations (now consistently included in the size inside the border) to be margin configurations (which are outside the border and not part of the size).

Rely on chromatic, explanation of some of the changes:

Menu changes look correct, the minimum size now includes the border instead of the border going outside the configured size
Select filter box changes look improved. The sizing of the filter box and the no options box now fit the control height instead of being larger than the control height
Rich text changes look innocuous. Added the interaction design figma we have but don't think there are strict visual design docs to reference.

[x] I have updated the project documentation to reflect my changes or determined no changes are needed.