https://gerrit.wikimedia.org/r/c/design/codex/+/940257 updated the Checkbox, Radio and ToggleSwitch components to use the Label component internally. This means the Vue versions of these components always use a structure where the a <div class="cdx-label cdx-checkbox__label"> contains a <label class="cdx-label__label">.

However, the CSS-only versions of these components are messier. The documentation examples with complex labels do use this structure, but the basic examples use the old structure, with just a <label class="cdx-checkbox__label">. This means that, for CSS-only Checkboxes (and Radios and ToggleSwitches), the .cdx-checkbox__label element could either be a <label> with no other classes, or it could be a <div> that also has a cdx-label class which contains a <label>. This inconsistency makes it easy to accidentally break the CSS-only version when changing the styles: for example, the current iteration of https://gerrit.wikimedia.org/r/c/design/codex/+/980457 tries to change a &__label selector to &__label.cdx-label, which works for the Vue version and for the complex CSS-only versions, but breaks the simple CSS-only version.

We should decide whether this inconsistency is a feature (simpler markup for CSS-only components) or a bug (inconsistency that can be confusing for Codex devs) and make changes accordingly:

• If we decide this is a feature, we should make sure it's documented properly:
  1. Change the &__label selectors to &__label, &__label.cdx-label so that it they are more specific than Label's styles, but also still apply to the simple CSS-only versions.
  2. Add a comment explaining what's going on, either above these selectors, or in the template (something like <!-- In CSS-only components this can be <label class="cdx-checkbox__label"> instead -->), or both.
• If we decide this is a bug, we should fix it carefully, to avoid a breaking change:
  1. Update the CSS-only documentation for these components to always use a full Label component (<div class="cdx-label"> containing a <label class="cdx-label__label">).
  2. For backwards compatibility (to ensure existing uses of the old HTML still work), combine the old and new selectors: instead of changing &__label to &__label.cdx-label, change it to &__label, &__label.cdx-label. This way the styles will work with both the old and the new CSS-only component markup.
  3. Add a comment above these selectors explaining this. Ideally we'd do this in a way that's easy to track, so that we can remember to remove the extra selector when we do a 2.0 release in the future. Maybe we could standardize on the DEPRECATED: prefix for this purpose, e.g. // DEPRECATED: Allow CSS-only Checkboxes not to set class="cdx-label".
  4. Update the CSS-only component demos in the sandbox and CodexExample to use the new markup.