Consistent box sizing border box

[rajsite]

Pull Request

🤨 Rationale

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

👩‍💻 Implementation

• Each component should use the display helper when defined which was made consistent in Use display helper consistently for all components #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).

🧪 Testing

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.

✅ Checklist

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