refactor(components): decouple touch targets from visual size in toggle components

Description

Currently, toggle components like Checkbox and Switch base their DOM dimensions on their visual size. While this looks neat in isolation, it completely breaks vertical alignment when placed next to standard controls (like Button or Select) and violates basic accessibility touch-target sizing. A 24px visual checkbox should not have a miserable 24px clickable area.

We need to implement an invisible outer area so these components respect the global density targets without altering their actual visual indicator size.

Proposed Solution

The root element must consume the shared interactive control heights to ensure layout stability and adequate hit areas. The visual box or pill should be drawn centrally within this space, acting as a sub-module.

Requirements:

• The root element's footprint must use --interactive-control-min-height-compact or standard for its inline and block dimensions.
• The visual indicator must use --interactive-toggle-indicator-size-compact or standard.
• The clickable area must span the entire root element footprint to prevent false affordances.
• The DOM should remain as flat as possible (e.g., leveraging appearance: none and pseudo-elements on the naked <input> where applicable).

Example Implementation

.dusk-checkbox {
  appearance: none;
  margin: 0;

  /* The invisible touch target aligned with global density */
  block-size: var(--interactive-control-min-height-standard);
  inline-size: var(--interactive-control-min-height-standard);

  display: inline-grid;
  place-items: center;
  position: relative;
}

.dusk-checkbox::before {
  content: "";
  position: absolute;
  
  /* The actual visual box */
  block-size: var(--interactive-toggle-indicator-size-standard);
  inline-size: var(--interactive-toggle-indicator-size-standard);
  border-radius: var(--interactive-control-border-radius-slight-size);
  
  background-color: var(--interactive-toggle-off-color);
  border: var(--interactive-control-border-width) solid var(--interactive-toggle-off-mark-color);
}

Start by locating the Checkbox and Switch component implementations and their styling, then inspect how the root dimensions and visual indicators currently use shared variables. Compare the components with standard controls and verify that the root footprint provides the full clickable area while the indicator retains its visual size. Done means compact and standard density targets align correctly without adding unnecessary DOM.