fix: align Switch with selection controls 2.0 (#4394)

* fix(next): use same dynamic color variable for hover as the other selection controls

* feat(next): add SelectionControlsAlignment story for visual comparison

* fix(next): align Switch spacing and margins with Checkbox and Radio

- Use --eds-sizing-icon-lg for consistent icon sizing
- Recalculate track (22x8px) and handle (12px) dimensions
- Add gap compensation for label alignment
- Use --eds-generic-gap-horizontal token for consistent spacing
- Add density-specific margin adjustment for comfortable mode
- Add flex-shrink: 0 to prevent control from shrinking

* fix(next): remove unused --eds-field-width from Switch

* fix(next): shortened comment about gap compensation

* fix(next): margin comment shorter

* fix(next): use fixed rem value for Switch gap compensation

* fix(next): add min-block-size to Switch control and snapshot test

- Add min-block-size to match icon height for proper spacing when label wraps
- Add snapshot test for consistency with Checkbox and Radio
- Remove alignment comparison story (no longer needed)

* test(next): update snapshots for Field.Label font-size change to md

Author: millus

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

@@ -68,7 +68,7 @@ exports[`Checkbox (next) matches snapshot 1`] = `
       class="eds-field__label"
       data-baseline="center"
       data-font-family="ui"
-      data-font-size="lg"
+      data-font-size="md"
       data-font-weight="normal"
       data-line-height="default"
       data-tracking="normal"

packages/eds-core-react/src/components/next/Field/Field.Label.tsx

@@ -9,7 +9,7 @@ export const FieldLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(
         ref={ref}
         as="label"
         family="ui"
-        size="lg"
+        size="md"
         baseline="center"
         lineHeight="default"
         weight="normal"

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

@@ -53,7 +53,7 @@ exports[`Radio (next) matches snapshot 1`] = `
       class="eds-field__label"
       data-baseline="center"
       data-font-family="ui"
-      data-font-size="lg"
+      data-font-size="md"
       data-font-weight="normal"
       data-line-height="default"
       data-tracking="normal"

packages/eds-core-react/src/components/next/Switch/Switch.test.tsx

@@ -24,6 +24,11 @@ const ControlledSwitch = ({ onChange }: ControlledProps) => {
 }
 
 describe('Switch (next)', () => {
+  it('matches snapshot', () => {
+    const { asFragment } = render(<Switch label="switch" />)
+    expect(asFragment()).toMatchSnapshot()
+  })
+
   describe('Rendering', () => {
     it('renders with label', () => {
       render(<Switch label="Enable notifications" />)

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

@@ -43,6 +43,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
       data-font-size="md"
       data-selectable-space="md"
       data-space-proportions="squished"
+      data-color-appearance={disabled ? 'neutral' : 'accent'}
     >
       <span
         className="eds-switch__control"

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

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Switch (next) matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="eds-field eds-switch"
+    data-color-appearance="accent"
+    data-font-size="md"
+    data-position="start"
+    data-selectable-space="md"
+    data-space-proportions="squished"
+  >
+    <span
+      class="eds-switch__control"
+      data-color-appearance="neutral"
+    >
+      <input
+        class="eds-switch__input"
+        id="test-id"
+        role="switch"
+        type="checkbox"
+      />
+      <span
+        class="eds-switch__track"
+      >
+        <span
+          class="eds-switch__handle"
+        />
+      </span>
+    </span>
+    <label
+      class="eds-field__label"
+      data-baseline="center"
+      data-font-family="ui"
+      data-font-size="md"
+      data-font-weight="normal"
+      data-line-height="default"
+      data-tracking="normal"
+      for="test-id"
+    >
+      switch
+    </label>
+  </div>
+</DocumentFragment>
+`;

packages/eds-core-react/src/components/next/Switch/switch.css

@@ -1,22 +1,35 @@
 /* Switch component - uses Field for layout */
 @layer eds-components {
   .eds-switch {
-    --eds-field-width: fit-content; /* Override Field's default 100% width */
-    --_icon-size: var(--eds-typography-icon-size, var(--eds-sizing-icon-md));
-    --_handle-size: calc(var(--_icon-size) * 0.6);
-    --_track-width: calc(var(--_icon-size) * 1.1);
-    --_track-height: calc(var(--_icon-size) * 0.4);
+    --_switch-hover-color: var(--eds-color-bg-fill-muted-default);
+    --_icon-size: var(--eds-sizing-icon-lg);
+    /* Track: 22x8px, Handle: 12px (spacious density with 24px icon size) */
+    --_handle-size: calc(var(--_icon-size) / 2);
+    --_track-width: calc(var(--_icon-size) * 11 / 12);
+    --_track-height: calc(var(--_icon-size) / 3);
     /* TODO: Replace with semantic token when available */
     --_track-hover-bg: var(--eds-color-neutral-2);
+    /*
+     * Gap compensation for label alignment with Checkbox and Radio.
+     * Checkbox/Radio icons have ~3px internal SVG padding, but the Switch
+     * track is rendered edge-to-edge. This requires smaller gap adjustment
+     * to achieve consistent label positioning across all selection controls.
+     */
+    --_switch-gap-compensation: 0.1rem;
 
     position: relative;
-    gap: var(--eds-typography-gap-horizontal);
-    padding: var(--eds-selectable-space-vertical)
-      var(--eds-selectable-space-horizontal);
+    gap: calc(
+      var(--eds-generic-gap-horizontal) + var(--_switch-gap-compensation)
+    );
+    padding-inline: var(--eds-selectable-space-horizontal);
+    padding-block: var(--eds-selectable-space-vertical);
+    width: auto;
     border-radius: var(--eds-spacing-border-radius-rounded);
     cursor: pointer;
     transition: background-color 150ms;
+  }
 
+  .eds-switch {
     &:has(.eds-switch__input:focus-visible) {
       outline: var(--eds-sizing-stroke-thin) solid var(--eds-color-border-focus);
       outline-offset: var(--eds-sizing-stroke-thick);
@@ -28,7 +41,7 @@
 
     @media (hover: hover) and (pointer: fine) {
       &:hover:not([data-disabled='true']) {
-        background-color: var(--eds-color-bg-accent-fill-muted-default);
+        background-color: var(--_switch-hover-color);
       }
     }
 
@@ -47,9 +60,14 @@
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    /* Same margins as icons for proper form alignment */
-    margin-block: calc(var(--_icon-size) * -0.25);
-    margin-inline: calc(var(--_icon-size) * -0.1);
+    min-block-size: var(--_icon-size);
+    /* Negative margin for alignment with Checkbox/Radio icons */
+    margin-block: -6px;
+    margin-inline: -1.9px;
+  }
+
+  [data-density='comfortable'] .eds-switch__control {
+    margin-inline: -2.1px;
   }
 
   .eds-switch__input {

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

@@ -12,7 +12,7 @@ exports[`TextField (Next EDS 2.0) Matches snapshot 1`] = `
         class="eds-field__label"
         data-baseline="center"
         data-font-family="ui"
-        data-font-size="lg"
+        data-font-size="md"
         data-font-weight="normal"
         data-line-height="default"
         data-tracking="normal"