After reconsidering the current approach taken in the patch set https://gerrit.wikimedia.org/r/#/c/313940/ on T146962 it seems reasonable to consider applying `box-sizing: border-box` as general rule for OOjs UI elements/widgets.
Citing from the patch:
> I agree that this should be labelled ”breaking change”, an easily handleable one though.
> A question arising is, if we better set `box-sizing: border-box` as general rule for `.oo-ui-widgets`? It's the more intuitive (more humanized) way of calculating sizes, we already do it on a bunch of widgets (DropdownHandle, TextInput, Checkbox, Radio, ToggleSwitch, SelectFileWidgetInfo, CapsuleItemWidget). Through inherited classes or mixins you might end up in unwanted inheritance if not relying on it generally. It would be also more reliable from an consistency perspective.
> OOjs UI developers [w]ould be sure, that there's _one_ way of `box-sizing`.
It's not inherited, so we'll have to think about if a `.oo-ui-widget > *` selector is feasible.
As of v0.19.0 `box-sizing: border-box` is applied to following widgets:
| Element | ? | notes
| ----- | ----- | -----
| ButtonElement | {icon check color=green} | In use since v0.19.0
| ClippableElement | {icon check color=green} | In use
| DraggableElement | {icon ban color=red} |
| FlaggedElement | {icon ban color=red} |
| IconElement | {icon ban color=red} | Has a patch for review
| IndicatorElement | {icon ban color=red} | Has a patch for review
| LabelElement | {icon ban color=red} | Has a patch for review
| LookupElement | {icon check color=yellow} | Covered in TextInputWidget
| PendingElement | {icon ban color=red} |
| PopupElement | {icon ban color=red} |
| TabIndexedElement | {icon ban color=red} |
| TitledElement | {icon ban color=red} |
| Widget | ? | notes
| ----- | ----- | -----
| ButtonWidget | {icon check color=green} | In use since v0.19.0 through ButtonElement
| ButtonGroup-/SelectWidget | {icon check color=green} | In use since v0.19.0 through ButtonElement
| CapsuleMultiselectWidget | {icon check color=yellow} | Partly.
| CheckboxWidget | {icon check color=green} | Checkboxes and Radios are the few elements, that are `border-box` per default in browsers today (except IE < 10). But also or `<span>` rebuild is using it already
| ComboBoxInputWidget | {icon check color=green} | In use
| DropDownWidget | {icon check color=yellow} | Partly. `handle` has already `border-box` enabled, enabling on parent element isn't problematic
| NumberInputWidget | {icon check color=green} | In use
| ProgressBarWidget | {icon check color=green} | Since v0.21.2
| RadioInputWidget | {icon check color=green} | See Checkbox above
| SelectFileWidget | {icon check color=yellow} | Partly. `-info` has it applied, easily switchable
| TextInputWidget | {icon check color=green} | In use
| ToggleSwitchWidget | {icon check color=green} | In use
| Tools | ? | notes
| ----- | ----- | -----
| Toolbars | {icon ban color=red} |
| ToolGroups | {icon check color=green} | Since v0.23.3
| Tools | {icon check color=green} | Since v0.23.3