fix!: convert Field, Switch, Radio, Checkbox BEM classes to flat class names (#5115)

* fix!: convert Field BEM classes to flat class names

Renames BEM element classes to flat names scoped by CSS nesting:
- eds-field__label       → label
- eds-field__indicator   → indicator
- eds-field__description → description
- eds-field__helper-message → helper-message

Also restructures field.css to nest inner element selectors inside
.eds-field using CSS nesting.

BREAKING CHANGE: consumers targeting these class names directly in their
own CSS must update to the new flat names.

* fix!: convert Switch BEM classes to flat class names

Renames BEM element classes to flat names scoped by CSS nesting:
- eds-switch__control → control
- eds-switch__input   → input
- eds-switch__track   → track
- eds-switch__handle  → handle

Also restructures switch.css to use full CSS nesting, moves the
checked/disabled handle state rules up to the .eds-switch scope
(cleaner than the previous inside-out nesting), and replaces the
cross-component .eds-field__label selector with the native label
element to remove the coupling to Field's internal class names.

BREAKING CHANGE: consumers targeting these class names directly in their
own CSS must update to the new flat names.

* fix!: convert Radio BEM classes to flat class names

Renames BEM element/modifier classes to flat names:
- eds-radio__icon-wrapper    → icon-wrapper
- eds-radio__input           → input
- eds-radio__icon            → icon
- eds-radio__icon--checked   → icon-checked
- eds-radio__icon--unchecked → icon-unchecked
- eds-radio--standalone (class modifier) → data-standalone attribute

Also restructures radio.css with full CSS nesting, removes the
unused classNames helper from Radio.tsx, and replaces the
cross-component .eds-field__label selector with the native label
element to decouple from Field's internal class names.

BREAKING CHANGE: consumers targeting these class names directly in their
own CSS must update to the new flat names.

* fix!: convert Checkbox BEM classes to flat class names

Renames BEM element/modifier classes to flat names:
- eds-checkbox__icon-wrapper      → icon-wrapper
- eds-checkbox__input             → input
- eds-checkbox__icon              → icon
- eds-checkbox__icon--checked     → icon-checked
- eds-checkbox__icon--unchecked   → icon-unchecked
- eds-checkbox__icon--indeterminate → icon-indeterminate
- eds-checkbox--standalone (class modifier) → data-standalone attribute

Also restructures checkbox.css with full CSS nesting, removes the
unused classNames helper from Checkbox.tsx, and replaces the
cross-component .eds-field__label selector with the native label
element to decouple from Field's internal class names.

BREAKING CHANGE: consumers targeting these class names directly in their
own CSS must update to the new flat names.

* fix: update TextField snapshot after Field class name changes

Author: millus

packages/eds-core-react/src/components/next/Checkbox/Checkbox.tsx

@@ -9,9 +9,6 @@ import { Field } from '../Field'
 import { Icon } from '../Icon'
 import type { CheckboxProps } from './Checkbox.types'
 
-const classNames = (...classes: (string | boolean | undefined)[]) =>
-  classes.filter(Boolean).join(' ')
-
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   function Checkbox(
     {
@@ -44,27 +41,23 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           id={inputId}
           aria-checked={indeterminate ? 'mixed' : undefined}
           aria-describedby={helperMessage ? helperMessageId : undefined}
-          className="eds-checkbox__input"
+          className="input"
           disabled={disabled}
           ref={inputRef}
           data-indeterminate={indeterminate}
           {...rest}
         />
-        <span className="eds-checkbox__icon-wrapper">
-          <Icon
-            data={checkbox}
-            size="lg"
-            className="eds-checkbox__icon eds-checkbox__icon--checked"
-          />
+        <span className="icon-wrapper">
+          <Icon data={checkbox} size="lg" className="icon icon-checked" />
           <Icon
             data={checkbox_outline}
             size="lg"
-            className="eds-checkbox__icon eds-checkbox__icon--unchecked"
+            className="icon icon-unchecked"
           />
           <Icon
             data={checkbox_indeterminate}
             size="lg"
-            className="eds-checkbox__icon eds-checkbox__icon--indeterminate"
+            className="icon icon-indeterminate"
           />
         </span>
       </>
@@ -96,7 +89,8 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
 
     return (
       <span
-        className={classNames('eds-checkbox', 'eds-checkbox--standalone')}
+        className="eds-checkbox"
+        data-standalone={true}
         data-color-appearance={disabled ? 'neutral' : 'accent'}
         data-disabled={disabled || undefined}
       >

packages/eds-core-react/src/components/next/Checkbox/__snapshots__/Checkbox.test.tsx.snap

@@ -10,17 +10,17 @@ exports[`Checkbox (next) matches snapshot 1`] = `
     data-space-proportions="squished"
   >
     <input
-      class="eds-checkbox__input"
+      class="input"
       data-indeterminate="false"
       id="test-id"
       type="checkbox"
     />
     <span
-      class="eds-checkbox__icon-wrapper"
+      class="icon-wrapper"
     >
       <svg
         aria-hidden="true"
-        class="eds-icon eds-checkbox__icon eds-checkbox__icon--checked"
+        class="eds-icon icon icon-checked"
         data-icon-size="lg"
         data-testid="eds-icon"
         fill="currentColor"
@@ -35,7 +35,7 @@ exports[`Checkbox (next) matches snapshot 1`] = `
       </svg>
       <svg
         aria-hidden="true"
-        class="eds-icon eds-checkbox__icon eds-checkbox__icon--unchecked"
+        class="eds-icon icon icon-unchecked"
         data-icon-size="lg"
         data-testid="eds-icon"
         fill="currentColor"
@@ -50,7 +50,7 @@ exports[`Checkbox (next) matches snapshot 1`] = `
       </svg>
       <svg
         aria-hidden="true"
-        class="eds-icon eds-checkbox__icon eds-checkbox__icon--indeterminate"
+        class="eds-icon icon icon-indeterminate"
         data-icon-size="lg"
         data-testid="eds-icon"
         fill="currentColor"
@@ -65,7 +65,7 @@ exports[`Checkbox (next) matches snapshot 1`] = `
       </svg>
     </span>
     <label
-      class="eds-field__label"
+      class="label"
       data-baseline="center"
       for="test-id"
     >