chromium/chrome/browser/resources/ash/settings/os_people_page/os_sync_controls_subpage.html

<style include="cr-shared-style settings-shared">
  .list-item {
    display: flex;
  }

  .list-item[sync-revamp-enabled] {
    align-items: center;
    flex-direction: row;
    gap: 16px;
    padding: 14px 20px;
  }

  #tooltipIcon {
    --cr-tooltip-icon-fill-color: var(--cros-color-secondary);
    --paper-tooltip-delay-in: 0;
    margin-inline-end: 20px;
  }

  #tooltipIcon[label-disabled]::part(tooltip) {
    visibility: hidden;
  }

  .list-item > div {
    flex: 1;
  }

  div[label-disabled],
  cr-tooltip-icon[label-disabled] {
    opacity: var(--cros-disabled-opacity);
  }
</style>
<div class="settings-box first">
  <localized-link class="secondary"
      localized-string="$i18n{osSyncFeatureLabel}"
      on-link-clicked="onBrowserSyncSettingsClicked_">
  </localized-link>
</div>
<div id="syncDataRadio" class="cr-row first">
  <cr-radio-group
      selected="[[selectedSyncDataRadio_(osSyncPrefs)]]"
      on-selected-changed="onSyncDataRadioSelectionChanged_">
    <cr-radio-button name="sync-everything">
      $i18n{syncEverythingCheckboxLabel}
    </cr-radio-button>
    <cr-radio-button name="customize-sync">
      $i18n{customizeSyncLabel}
    </cr-radio-button>
  </cr-radio-group>
</div>
<div class="cr-row first">
  <h2 class="cr-title-text flex">$i18n{syncData}</h2>
</div>
<div class="list-frame" id="sync-data-types">
  <div class="list-item" sync-revamp-enabled="[[showSyncSettingsRevamp_]]"
      hidden="[[!osSyncPrefs.osAppsRegistered]]">
    <div id="osAppsCheckboxLabel"
        label-disabled$="[[areDataTypeTogglesDisabled_]]">
      $i18n{osSyncAppsCheckboxLabel}
      <div class="secondary" hidden="[[!showSyncSettingsRevamp_]]">
          $i18n{osSyncAppsCheckboxSublabel}
      </div>
    </div>
    <cr-tooltip-icon id="tooltipIcon"
        tooltip-text="$i18n{osSyncAppsTooltipText}" icon-class="cr:help-outline"
        icon-aria-label="$i18n{osSyncAppsTooltipText}"
        hidden="[[!showSyncSettingsRevamp_]]"
        label-disabled$="[[areDataTypeTogglesDisabled_]]"
        exportparts="tooltip">
    </cr-tooltip-icon>
    <cr-toggle id="osAppsControl"
        checked="{{osSyncPrefs.osAppsSynced}}"
        on-change="onSingleSyncDataTypeChanged_"
        disabled="[[areDataTypeTogglesDisabled_]]"
        aria-labelledby="osAppsCheckboxLabel">
    </cr-toggle>
  </div>
  <div class="list-item" sync-revamp-enabled="[[showSyncSettingsRevamp_]]"
      hidden="[[!osSyncPrefs.osPreferencesRegistered]]">
    <div id="osSettingsCheckboxLabel"
        label-disabled$="[[areDataTypeTogglesDisabled_]]">
      $i18n{osSyncSettingsCheckboxLabel}
      <div class="secondary" hidden="[[!showSyncSettingsRevamp_]]">
        $i18n{osSyncSettingsCheckboxSublabel}
      </div>
    </div>
    <cr-toggle id="osPreferencesControl"
        checked="{{osSyncPrefs.osPreferencesSynced}}"
        on-change="onSettingsSyncedChanged_"
        disabled="[[areDataTypeTogglesDisabled_]]"
        aria-labelledby="osSettingsCheckboxLabel">
    </cr-toggle>
  </div>
  <div class="list-item" sync-revamp-enabled="[[showSyncSettingsRevamp_]]"
       hidden="[[!osSyncPrefs.osWifiConfigurationsRegistered]]">
    <div id="osWifiConfigurationsCheckboxLabel"
        label-disabled$="[[areDataTypeTogglesDisabled_]]">
      $i18n{osSyncWifiConfigurationsCheckboxLabel}
      <div class="secondary" hidden="[[!showSyncSettingsRevamp_]]">
        $i18n{osSyncWifiCheckboxSublabel}
      </div>
    </div>
    <cr-toggle checked="{{osSyncPrefs.osWifiConfigurationsSynced}}"
        on-change="onSingleSyncDataTypeChanged_"
        disabled="[[areDataTypeTogglesDisabled_]]"
        aria-labelledby="osWifiConfigurationsCheckboxLabel">
    </cr-toggle>
  </div>
  <div class="list-item" sync-revamp-enabled="[[showSyncSettingsRevamp_]]"
      hidden="[[!osSyncPrefs.osAppsRegistered]]">
    <!-- Wallpaper sync is a special case; its implementation relies upon
         OS Settings to be synced. Thus, the wallpaper label and toggle are
         only enabled when the Settings sync toggle above is on. -->
    <div id="wallpaperCheckboxLabel"
        label-disabled$="[[shouldWallpaperSyncSectionBeDisabled_(
            areDataTypeTogglesDisabled_, osSyncPrefs.osAppsSynced)]]">
      $i18n{wallpaperCheckboxLabel}
      <div class="secondary" hidden="[[!showSyncSettingsRevamp_]]">
        $i18n{osSyncWallpaperCheckboxSublabel}
      </div>
    </div>
    <cr-toggle checked="{{osSyncPrefs.wallpaperEnabled}}"
        on-change="onSingleSyncDataTypeChanged_"
        disabled="[[shouldWallpaperSyncSectionBeDisabled_(
            areDataTypeTogglesDisabled_, osSyncPrefs.osAppsSynced)]]"
        aria-labelledby="wallpaperCheckboxLabel">
    </cr-toggle>
  </div>
</div>